通过CSS向JS传参的方法
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
一、需要通过CSS传参的背景
CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。
比方说最近经常提到的黑暗模式,深色主题:
1 2 3 4 5 6 | @media (prefers-color-scheme: dark) { /* 黑暗模式,深色主题 */ } @media (prefers-color-scheme: light) { /* 浅色主题 */ } |
CSS可以自动检测,但是有时候,在JS中,我们也需要根据不同的系统主题,然后实现不同的交互逻辑,或者渲染出不一样的内容。
怎么办?似乎一时间也找不到现成的JS API来检测系统模式,只能借助于CSS中传参了。这就是一个典型的场景,类似的场景还有很多。
例如:
1. CSS和JS边界宽度一致性
我们在做响应式布局的时候,经常会需要设定一个临界宽度值,例如当设备的宽度小于640像素的时候,我们就认为是进入了移动端;或者是宽度小于480的像素的时候,就使用移动端布局等。
此时,JavaScript代码也需要根据这个临界宽度实现不同的交互效果,大于多少的时候是PC的交互,小于多少的时候是移动端布局下的交互。
很多人在实际开发的时候就CSS代码和JS代码约定一下,例如:
1 2 3 4 5 6 | @media screen and ( max-width : 480px ) { /* 小屏幕宽度下的响应式布局 */ } if ( screen .width < 480 ) { /* 小屏幕宽度下的交互行为 */ } |
要是这种约定会有一个问题,等项目过了一段时间之后,发现这个临界宽度有问题,比方说手机横屏的时候,它的宽度是大于 480px 的,也应该是移动端的布局方式,于是开发就改成了 640px 。
结果忘记JS代码中也有这一茬判断,结果就会出现bug。
如果原先实现的时候,我们的JavaScript代码中的屏幕判断是基于CSS传参的话,那就不会有这样子的维护问题出现。
2. 浏览器是否支持:hover伪类交互
我们会开发一些ui组件,希望在桌面端和移动端,以及物联网设备上通用。
有些组件在桌面当我们使用 mouseenter 或者 mouseover 事件来实现体验还是很不错的,非常便捷。但是如果这些东西用在移动端以及其他一些触屏设备上,则这个世界就有问题啊,因为没有这种hover的说法。
好在CSS代码中是有关于浏览器是否支持:hover伪类交互媒体查询判断(此查询有专门文章介绍,点击这里):
可惜JS中并没有这样的API直接判断。很多人应该是通过判断浏览器是否支持 touchstart 之类的事件来进行判断的。不过可惜这种判断方法是不准确的。因为很多触摸设备也是可以连接鼠标设备的,此时hover事件也应该被良好支持。
因此,最后的方法还是通过CSS媒体查询判断,然后把这个判断结果以参数形式传递给js。
好啦,下面问题来了,上面举了这三个案例,我们如何通过CSS把我们的参数传递给JS代码呢?
二、CSS传参给JS的方法
通常借助CSS向JS传参,我都是使用下面这两种方法。
1. content伪元素内容传参
例如:
此时就可以通过JS代码获取body伪元素传递的信息是什么了:
1 2 3 | 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做模式识别。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | :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检测代码:
1 2 3 | var mode = getComputedStyle(document.documentElement).getPropertyValue( '--mode' ).trim(); // mode结果是 '"dark"' 则表示黑夜主题,深色模式,黑暗风格,护眼模式。 // mode结果是其他表示默认模式 |
例如在我这个电脑上运行的结果是下图这个:
在Mac OS X或者移动端设备上应该会显示其他的值,欢迎帮忙测试截个图发我,我更新到文章中。
使用CSS自定义属性传统的好处是非常灵活,我们可以定义很多很多的变量都可以。而且其实我们也没有任何必要担心兼容性的问题。为什么呢?因为凡是支持黑夜模式的设备浏览器,一定支持CSS自定义属性。
因此,综合来看,使用CSS自定义属性传参在黑暗模式这个场景中是最佳的实现。但是,如果是基于设备宽度传参响应式布局这场场景,还是使用CSS content 属性传参为佳。
总结
以上所述是小编给大家介绍的通过CSS向JS传参的方法,希望对大家有所帮助,也非常感谢大家对脚本之家网站的支持!
相关文章
如何使用CSS的object-position实现图片在img标签中的定位
该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位2024-11-08- 文章主要探讨了CSS Grid布局在Internet Explorer(IE)中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
- 本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边2024-10-29
- 在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self2024-10-29
- 在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg2024-10-29
- 本文详细介绍了CSS中的border属性及其相关特性,包括border-width(宽度)、border-style(样式)和border-color(颜色)等,此外,还讲述了如何独立控制元素的四个边的边框,2024-10-28
- 本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用2024-10-28
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26
最新评论