CSS啥场景要向JS传参，方法是什么？

发布时间：2023-08-10 14:12:30 所属栏目：语言来源：

导读： 这篇文章给大家分享的是CSS向JS传参的内容，有时候我们需要通过CSS向JS传参，那么具体什么时候需要这样做呢？实现方法又是什么？文中介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

一、需要通过CS

这篇文章给大家分享的是CSS向JS传参的内容，有时候我们需要通过CSS向JS传参，那么具体什么时候需要这样做呢？实现方法又是什么？文中介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

    一、需要通过CSS传参的背景

    CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。

    比方说最近经常提到的黑暗模式，深色主题：

@media (prefers-color-scheme: dark) {

    /* 黑暗模式，深色主题 */

}

@media (prefers-color-scheme: light) {

    /* 浅色主题 */

}

    CSS可以自动检测，但是有时候，在JS中，我们也需要根据不同的系统主题，然后实现不同的交互逻辑，或者渲染出不一样的内容。

    怎么办？似乎一时间也找不到现成的JS API来检测系统模式，只能借助于CSS中传参了。这就是一个典型的场景，类似的场景还有很多。

    例如：

    1. CSS和JS边界宽度一致性

    我们在做响应式布局的时候，经常会需要设定一个临界宽度值，例如当设备的宽度小于640像素的时候，我们就认为是进入了移动端；或者是宽度小于480的像素的时候，就使用移动端布局等。

    此时，JavaScript代码也需要根据这个临界宽度实现不同的交互效果，大于多少的时候是PC的交互，小于多少的时候是移动端布局下的交互。

    很多人在实际开发的时候就CSS代码和JS代码约定一下，例如：

@media screen and (max-width: 480px) {

    /* 小屏幕宽度下的响应式布局 */

}

if (screen.width < 480) {

    /* 小屏幕宽度下的交互行为 */

}

    要是这种约定会有一个问题，等项目过了一段时间之后，发现这个临界宽度有问题，比方说手机横屏的时候，它的宽度是大于 480px 的，也应该是移动端的布局方式，于是开发就改成了 640px 。

@media screen and (max-width: 640px) {

    /* 小屏幕宽度下的响应式布局 */

}

    结果忘记JS代码中也有这一茬判断，结果就会出现bug。

    如果原先实现的时候，我们的JavaScript代码中的屏幕判断是基于CSS传参的话，那就不会有这样子的维护问题出现。

    2. 浏览器是否支持:hover伪类交互

    我们会开发一些ui组件，希望在桌面端和移动端，以及物联网设备上通用。

    有些组件在桌面当我们使用 mouseenter 或者 mouseover 事件来实现体验还是很不错的，非常便捷。但是如果这些东西用在移动端以及其他一些触屏设备上，则这个世界就有问题啊，因为没有这种hover的说法。

    好在CSS代码中是有关于浏览器是否支持:hover伪类交互媒体查询判断（此查询有专门文章介绍，点击这里）：

@media (any-hover: none) {

    /* 设备不支持hover事件 */

}

    可惜JS中并没有这样的API直接判断。很多人应该是通过判断浏览器是否支持 touchstart 之类的事件来进行判断的。不过可惜这种判断方法是不准确的。因为很多触摸设备也是可以连接鼠标设备的，此时hover事件也应该被良好支持。

    因此，最后的方法还是通过CSS媒体查询判断，然后把这个判断结果以参数形式传递给js。

    好啦，下面问题来了，上面举了这三个案例，我们如何通过CSS把我们的参数传递给JS代码呢？

    二、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中传递的信息了。

    这种传参方式的优点在于兼容性相对较好，但是不足却也很明显，那就是我们传递的参数值的数量是有限的，如果我们想一次性传多个值，就有些捉襟见肘，此时可以试试下面这种方法，借助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自定义属性传统的好处是非常灵活，我们可以定义很多很多的变量都可以。而且其实我们也没有任何必要担心兼容性的问题。为什么呢？因为凡是支持黑夜模式的设备浏览器，一定支持CSS自定义属性。

    因此，综合来看，使用CSS自定义属性传参在黑暗模式这个场景中是最佳的实现。但是，如果是基于设备宽度传参响应式布局这场场景，还是使用CSS content 属性传参为佳。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!