怎么在HTML标签和JS中设置CSS3 var变量

这篇“怎么在HTML标签和JS中设置CSS3 var变量”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么在HTML标签和JS中设置CSS3 var变量”文章吧。

　　一、HTML标签中设置CSS变量

　　如下：

　　<divstyle="--color:#cd0000;">

　　<imgsrc="mm.jpg"style="border:10pxsolidvar（--color）；">

　　</div>

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

　　效果如下截图：

　　2018-11-16_221537.png

　　二、JS中设置CSS变量

　　如下，HTML示意：

　　<divid="box">

　　<imgsrc="mm.jpg"style="border:10pxsolidvar（--color）；">

　　</div>

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

　　box.style.setProperty（'--color','#cd0000'）；

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

　　js-set-var.gif

　　三、JS中获取CSS变量

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

　　//获取--colorCSS变量值

　　varcssVarColor=getComputedStyle（box）。getPropertyValue（'--color'）；

　　//输出cssVarColor

　　//输出变量值是：#cd0000

　　console.log（cssVarColor）；

　　四、关于CSS3var（）变量

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

以上就是关于“怎么在HTML标签和JS中设置CSS3 var变量”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。