如何通过CSS向JS传参

最新推荐文章于 2024-03-23 10:06:48 发布

A-Select °

最新推荐文章于 2024-03-23 10:06:48 发布

阅读量801

点赞数

本文链接：https://blog.csdn.net/weixin_45959504/article/details/104405407

版权

本文介绍了在JavaScript中如何根据CSS的媒体查询、设备特性等条件实现不同交互逻辑。通过CSS的`content`伪元素内容传参和CSS自定义属性（CSS变量）传参两种方法，将CSS的参数传递给JS，解决响应式布局、系统主题判断等问题，提高代码的维护性和一致性。

摘要由CSDN通过智能技术生成

今日文章由阅文@张鑫旭授权分享。

正文从这开始～～
一、需要通过CSS传参的背景

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

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

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

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

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

      /* 浅色主题 */
    }

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

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

例如：

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

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

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

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

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

if (screen . width <

关注