根据CSS向JS传参的方式

1、必须根据CSS传参的情况

CSS中有许多新闻媒体查寻的用法，比如机器设备规格辨别，是不是适用电脑鼠标个人行为，是不是是黑喑方式，是不是是省电方式等。

比如说近期常常提到的黑喑方式，深色主题：

@media (prefers-color-scheme: dark) {
    /* 黑喑方式，深色主题 */
}
@media (prefers-color-scheme: light) {
    /* 浅色系主题 */
}

CSS能够全自动检验，可是有时，在JS中，大家也必须依据不一样的系统软件主题，随后完成不一样的互动逻辑性，或3D渲染出不1样的內容。

如何办？好像1時间也找不到现成的JS API来检验系统软件方式，只能依靠于CSS中传参了。这便是1个典型的情景，相近的情景也有许多。

比如：

1. CSS和JS界限宽度1致性

大家在做回应式合理布局的情况下，常常会必须设置1个临界值宽度值，比如当机器设备的宽度小于640像素的情况下，大家就觉得是进到了挪动端；或是宽度小于480的像素的情况下，就应用挪动端合理布局等。

此时，JavaScript编码也必须依据这个临界值宽度完成不一样的互动实际效果，超过是多少的情况下是PC的互动，小于是多少的情况下是挪动端合理布局下的互动。

许多人在具体开发设计的情况下就CSS编码和JS编码承诺1下，比如：

@media screen and (max-width: 480px) {
    /* 小显示屏宽度下的回应式合理布局 */
}
if (screen.width < 480) {
    /* 小显示屏宽度下的互动个人行为 */
}

如果这类承诺会有1个难题，等新项目过了1段時间以后，发现这个临界值宽度有难题，比如说手机上横屏的情况下，它的宽度是超过 480px 的，也应当是挪动端合理布局方法，因而开发设计就改为了 640px 。

@media screen and (max-width: 640px) {
    /* 小显示屏宽度下的回应式合理布局 */
}

結果忘掉JS编码中也是有这1茬分辨，結果就会出現bug。

假如本来完成的情况下，大家的JavaScript编码中的显示屏分辨是根据CSS传参的话，那就不容易有这模样的维护保养难题出現。

2. 访问器是不是适用:hover伪类互动

大家会开发设计1些ui组件，期待在桌面上端和挪动端，和物连接网络机器设备上通用性。

一些组件在桌面上当大家应用 mouseenter 或 mouseover 恶性事件来完成体验還是很非常好的，十分方便快捷。可是假如这些物品用在挪动端和别的1些触摸屏机器设备上，则这个全球就有难题啊，由于沒有这类hover的说法。

好在CSS编码中是相关于访问器是不是适用:hover伪类互动新闻媒体查寻分辨（此查寻有专业文章内容详细介绍，点一下这里）：

@media (any-hover: none) {
    /* 机器设备不适用hover恶性事件 */
}

可是JS中并沒有这样的API立即分辨。许多人应当是根据分辨访问器是不是适用 touchstart 之类的恶性事件来开展分辨的。但是可是这类分辨方式是禁止确的。由于许多触碰机器设备也是能够联接电脑鼠标机器设备的，此时hover恶性事件也应当被优良适用。

因而，最终的方式還是根据CSS新闻媒体查寻分辨，随后把这个分辨結果以主要参数方式传送给js。

好啦，下面难题来了，上面举了这3个实例，大家怎样根据CSS把大家的主要参数传送给JS编码呢？

2、CSS传参给JS的方式

一般依靠CSS向JS传参，我全是应用下面这两种方式。

1. content伪元素內容传参

比如：

@media (any-hover: none) {
    body::before {
        content: 'hoverNone';
        display: none;
    }
}

此时便可以根据JS编码获得body伪元素传送的信息内容是甚么了：

var strContent = getComputedStyle(document.body, '::before').content;
// strContent結果是'none'则表明适用hover
// strContent結果是'"hoverNone"'则表明不适用hover历经，必须换为click恶性事件

本文就预埋了上面这样的CSS编码，因而，Chrome访问器下，开启操纵台，进到挪动端预览方式，键入JS检测下，能够看到大家CSS传送的标识符串信息内容被JS获得到了。

此时，大家便可以依据 ::before , ::after 伪元素相互配合 content 特性，得知CSS中传送的信息内容了。

这类传参方法的优势在于适配性相对性较好，可是不够却也很显著，那便是大家传送的主要参数值的数量是比较有限的，假如大家想1次性传好几个值，就一些困窘，此时能够试试下面这类方式，依靠CSS自定特性。

2. CSS自定特性（CSS自变量）传参

立即上编码，有了 CSS自定特性（CSS自变量） ，黑喑方式和浅色系方式的开发设计和维护保养工作中就变得相对性非常容易许多，除此以外，这个CSS自定特性大家还能够用来给JS做方式鉴别。

:root {
    --mode: 'unknown';
}
@media (prefers-color-scheme: dark) {
    /* 黑喑方式 */
    :root {
         --mode: 'dark';
         --colorLink: #bfdbff;
         --colorMark: #cc0000;
         --colorText: #ffffff;
         --colorLight: #777777;
    }
}
@media (prefers-color-scheme: light) {
    /* 浅色系主题 */
    :root {
         --mode: 'light';
         --colorLink: #34538b;
         --colorMark: #cc0000;
         --colorText: #000000;
         --colorLight: #cccccc;
    }
}

JS检验编码：

var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// mode結果是'"dark"'则表明黑夜主题，深色方式，黑喑设计风格，护眼设置。
// mode結果是别的表明默认设置方式

比如在我这个电脑上上运作的結果是下图这个：

在Mac OS X或挪动端机器设备上应当会显示信息别的的值，欢迎帮忙检测截个图发我，我升级到文章内容中。

应用CSS自定特性传统式的益处是是非非常灵便，大家能够界定许多许多的自变量都可以以。并且实际上大家也沒有任何苦要担忧适配性的难题。为何呢？由于但凡适用黑夜方式的机器设备访问器，1定适用CSS自定特性。

因而，综合性看来，应用CSS自定特性传参在黑喑方式这个情景中是最好的完成。可是，假如是根据机器设备宽度传参回应式合理布局这场情景，還是应用CSS content 特性传参为佳。

总结

以上所述是网编给大伙儿详细介绍的根据CSS向JS传参的方式，期待对大伙儿有一定的协助，也十分谢谢大伙儿对脚本制作之家网站的适用！