通过CSS向JS传参的方法
162 浏览量
2021-01-21
11:11:27
上传
评论
收藏 107KB PDF 举报
通过通过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代码呢？
资源评论
weixin_38742453
- 粉丝: 15
- 资源: 945
最新资源
- IMG_5905.PNG
- Cyclone Version 9.51
- 高性能量化回测工具 hikyuu 2.0.3 python 3.12 windows 安装包
- 省级城乡居民基本养老保险情况数据集（2010-2022年）.xlsx
- 舞队填写版.cpp
- 基于BP神经网络的多输入单输出回归预测.zip
- 高性能量化回测工具 hikyuu 2.0.3 python 3.9 windows 安装包
- 省级城镇职工基本养老保险情况2000-2022年.xlsx
- 高性能量化回测工具 hikyuu 2.0.3 python 3.10 windows 安装包
- 算法部署-使用OpenVINO+C#部署PaddleOCR字符识别算法-项目源码-优质项目实战.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
