跟着我左手右手一个慢动作,打开编辑器 => 创建html文件 写入以下代码
css 样式表结构
:root{--base-color: red;}
.container{ color: var(--base-color);}
html结构
<div class="container" >红色字体</div>
效果:页面中, 具有.container样式的div的字体是red色值。
这是css 的自定义属性的普通用法。
用法:
带有前缀--
的属性名,比如--example--name
,表示的是带有值的自定义属性,其可以通过 var
函数在全文档范围内复用的。
而
:root
选择器是声明的CSS自定义属性,其作用域的范围是全局范围,也就是全局作用域。
当然可以用父div的样式类声明一个自定义属性,给子类用
以下是如何在样式表以外的地方,动态操作自定义属性
内联用法
<div class="container" style="--base-color: blue;" >红色字体</div> // 这里会是蓝色字体
js操作用法
var dom = document.getElementById("thirdParagraph");
// 自定义属性设置值
dom.style.setProperty("--first-color","red")
dom.style.cssText='--first-color:red'
注意
不能直接dom.style["自定义属性名"]=value;进行设置
// 普通属性设置,也可用setProperty,cssText
dom.style.backgroudColor="red"
微信小程序用法,不支持dom操作,只能通过style传值
<div class="container" style="--base-color: {{value}};" >
附带MDN链接