本篇文章给大家带来的内容是关于如何html标签和js中设置css3 var变量，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、html标签中设置css变量
如下：
<div style="--color: #cd0000;"><img src="mm.jpg" style="border: 10px solid var（--color）；"></div>
直接正常css语句一样在style属性中设置即可。
效果如下截图：
二、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变量
js中获取css变量可以使用getpropertyvalue（）方法，示意：
// 获取 --color css 变量值var cssvarcolor = getcomputedstyle（box）。getpropertyvalue（'--color'）；// 输出cssvarcolor// 输出变量值是：#cd0000console.log（cssvarcolor）；
四、关于css3 var（）变量
css3 var（）变量是个好东西，2年前介绍的时候还没多少浏览器支持，现在，edge16也已经完全支持了。
以上就是对如何html标签和js中设置css3 var变量的全部介绍，如果您想了解更多有关css3教程，请关注。
以上就是如何html标签和js中设置css3 var变量的详细内容。