山海科技发展网

08月18日科技常识:如何通过CSS向JS传参

导读 摘要 今天小编跟大家讲解下有关如何通过CSS向JS传参 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关如何通过CSS向JS传参...
摘要 今天小编跟大家讲解下有关如何通过CSS向JS传参 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关如何通过CSS向JS传参 的

今天小编跟大家讲解下有关如何通过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自定义属性传参在黑暗模式这个场景中是最佳的实现。但是 如果是基于设备宽度传参响应式布局这场场景 还是使用CSScontent属性传参为佳。

本文来源:https://www.zhangxinxu.com/wordpress/?p=9263

来源:爱蒂网