by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8163
本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、HTML标签中设置CSS变量

如下：

<div style="--color: #cd0000;">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

直接正常CSS语句一样在style属性中设置即可。

效果如下截图：

您可以狠狠地点击这里：在HTML标签style中设置CSS变量demo

二、JS中设置CSS变量

如下，HTML示意：

<div id="box">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

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

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

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

您可以狠狠地点击这里：JS设置CSS变量demo

三、JS中获取CSS变量

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

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 

// 输出cssVarColor
// 输出变量值是：#cd0000 
console.log(cssVarColor);

四、关于CSS3 var()变量

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

更多关于CSS原生变量的特性，可以参考我之前这篇文章：“了解CSS/CSS3原生变量var”。

以上就是本文全部内容，感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8163

（本篇完）