css自定义属性,操作css自定义属性的一些常见方法

跟着我左手右手一个慢动作，打开编辑器 => 创建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链接

自定义属性mdn传送门