如何在HTML标签和JS中设置CSS3 var变量

Posted 2021-04-09 架构师日刊

阅读本文约需要5分钟

大家好，我是你们的导师，我每天都会给大家分享一些干货内容（当然了，周末也要允许老师休息一下哈）。上次给大家分享了CSS scroll-snap滚动事件相关的知识，今天跟大家分享下如何在html标签和JS中设置CSS3 var变量。

HTML标签中设置CSS变量

如下：

直接正常CSS语句一样在style属性中设置即可。效果如下截图：

JS中设置CSS变量

如下，HTML示意：

如果要想让var(--color)生效，执行下面javascript代码即可：

box.style.setProperty('--color', '#cd0000');

也就是使用setProperty()方法，效果如下GIF截屏示意：

JS中获取CSS变量

JS中获取CSS变量可以使用getPropertyValue()方法，示意：

关于CSS3 var()变量

CSS3 var()变量是个好东西，2年前绍的时候还没多少浏览器支持，现在，Edge16也已经完全支持了。

今天就分享到这，今日留言话题：HTML标签和JS中设置CSS3 var变量你会了吗？一起来说说吧，对于有价值的留言，我们都会一一回复的。如果觉得对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。