63
小tips: 如何HTML标签和JS中设置CSS3 var变量
source link: https://www.zhangxinxu.com/wordpress/2018/11/html-js-set-css-css3-var变量/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8163
本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。
一、HTML标签中设置CSS变量
如下：
<div style="--color: #cd0000;">
<img src="mm.jpg" style="border: 10px solid var(--color);">
</div>
直接正常CSS语句一样在 style 属性中设置即可。
效果如下截图：
您可以狠狠地点击这里： 在HTML标签style中设置CSS变量demo
二、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变量demo
三、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原生变量的特性，可以参考我之前这篇文章：“ 了解CSS/CSS3原生变量var ”。
以上就是本文全部内容，感谢阅读！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8163
（本篇完）
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK