一、HTML标签中设置装备摆设CSS变量

 

　　如下：

 

　　1

 

　　2

 

　　3

 

　　<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（）门径，暗指：

 

　　1

 

　　2

 

　　3

 

　　4

 

　　5

 

　　//获取--colorCSS变量值

 

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

 

　　//输入cssVarColor

 

　　//输出变量值是：#cd0000

 

　　console.log（cssVarColor）；

 

　　四、对于CSS3var（）变量

 

　　CSS3var（）变量是个珍宝，2年前简介的时分还没几多浏览器支持，目下当今，Edge16也已经完全支持了。

 

　　2018-11-27_001109.png

 

　　





本文转载自中文网