这篇文章将为大家详细讲解有关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 // 输出变量值是：#cd0000 console.log（cssVarColor）；
四、关于CSS3 var（）变量
CSS3 var（）变量是个好东西，2年前介绍的时候还没多少浏览器支持，现在，Edge16也已经完全支持了。
关于HTML标签和JS中怎么设置CSS3 var变量就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
