怎样HTML标签和JS中设置CSS3 var变量【css教程】,HTML标签,CSS3 var变量

本篇文章给人人带来的内容是关于怎样HTML标签和JS中设置CSS3 var变量，有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。

一、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也已完整支撑了。

以上就是对怎样HTML标签和JS中设置CSS3 var变量的悉数引见，假如您想相识更多有关CSS3教程，请关注ki4网。

以上就是怎样HTML标签和JS中设置CSS3 var变量的细致内容，更多请关注ki4网别的相干文章！