专栏首页前端自习课【CSS】515- 如何通过CSS向JS传参的

【CSS】515- 如何通过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属性传参为佳。

关于本文作者:@张鑫旭

原文:https://www.zhangxinxu.com/wordpress/2020/02/css-params-to-js/

本文分享自微信公众号 - 前端自习课(FE-study),作者:张鑫旭

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【每周小回顾】5- 一起回顾上周精彩内容

    在上周,【前端自习课】与大家分享了 7 篇文章,有介绍算法,也有极少 Vuejs,还有一些好玩的CSS技巧,这里我们在一起回顾下:

    pingan8787
  • 【CSS】248-天天都用CSS,你真的懂CSS吗?

    其一,HTML Parser 生成的 DOM 树; 其二,CSS Parser 生成的 Style Rules ;

    pingan8787
  • 【Web技术】610- Web上的图片技巧

    前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML <img>,或者是通过CSS背景生成的图片,也可能是SVG <image>。选择正...

    pingan8787
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅
  • CSS Conf -《新时代CSS布局》学习总结

    CSS布局经常是令前端开发者头痛的一块工作。但是近几年来,浏览器不断发展,开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局...

    陈大鱼头
  • 什么是CSS预处理器

    小胖
  • awesome-css-cn命名习惯和方式参考其他资源原文链接

    CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

    琯琯
  • 前端开发,从草根到英雄(第一部分)

    我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

    用户1667431
  • 前端修仙之路:从“路人”到大神,走对这几步很重要

    HTML 与 CSS基础 前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式...

    BestSDK
  • 2017年最佳的20款css工具

    1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券