如何在HTML和JS中设置和获取var CSS变量

这篇文章发布于 2018年11月16日,星期五,23:10,归类于 JS实例。 阅读 48031 次, 今日 17 次 10 条评论

 

一、HTML标签中设置CSS变量

如下:

<div style="--color: #cd0000;">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

直接正常CSS语句一样在style属性中设置即可。

效果如下截图:

style设置CSS变量效果截图

您可以狠狠地点击这里:在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变量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 var兼容性

更多关于CSS原生变量的特性,可以参考我之前这篇文章:“了解CSS/CSS3原生变量var”。

以上就是本文全部内容,感谢阅读!

(本篇完)

分享到:


发表评论(目前10 条评论)

  1. oh man说道:

    如果设置url 图片路径的话 好像url 在页面会被转义

  2. 千寻而见说道:

    请问那个鼠标移入链接下的波浪线是如何做到的

  3. jg说道:

    博主你变了,怎么不是张小姐的图

  4. xue5hen说道:

    很适合用来修改网站皮肤。只是IE不支持

  5. 阿桂说道:

    到底是做技术的,看起来很舒服

  6. 许新翔说道:

    在实际开发中,什么场景会用到