这篇文章发布于 2018年11月16日,星期五,23:10,归类于 JS实例。 阅读 48031 次, 今日 17 次 10 条评论
by zhangxinxu 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
(本篇完)
- 获取元素CSS值之getComputedStyle方法熟悉 (0.806)
- style标签下的CSS代码的显示与实时编辑 (0.269)
- 小tips:了解CSS变量var (0.169)
- CSS前景背景自动配色技术简介 (0.169)
- CSS届的绘图板CSS Paint API简介 (0.169)
- CSS var变量的局部作用域(继承)特性 (0.169)
- 使用“变量种子计数器”扩展CSS动画更多可能性 (0.163)
- 小tips: 如何借助content属性显示CSS var变量值 (0.163)
- 伪类+js实现CSS3 media queries跨界准确判断 (0.134)
- 内容loading加载后高度变化CSS3 transition体验优化 (0.134)
- CSS3 appearance大全鉴赏以及是否影响box-sizing (RANDOM - 0.006)
如果设置url 图片路径的话 好像url 在页面会被转义
请问那个鼠标移入链接下的波浪线是如何做到的
hover,背景图加循环动画,位置发生改变
博主你变了,怎么不是张小姐的图
这个小姐姐也不错呀
很适合用来修改网站皮肤。只是IE不支持
到底是做技术的,看起来很舒服
在实际开发中,什么场景会用到
JS动态修改某些CSS变量的时候。
修改主题的时候会有用