如下:
- <div style="--color: #cd0000;">
- <img src="mm.jpg" style="border: 10px solid var(--color);">
- </div>
直接正常 CSS 语句一样在 style 属性中设置即可.
效果如下截图:
style 设置 CSS 变量效果截图
二, 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 变量 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 也已经完全支持了.
CSS var 兼容性
来源: http://www.jianshu.com/p/7b8a89896951