一、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也已经完全支持了。
以上就是本文全部内容,感谢阅读!
这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!