一、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也已经完全支持了。





本文转载自中文网