css⾃定义属性，操作css⾃定义属性的⼀些常见⽅法跟着我左⼿右⼿⼀个慢动作，打开编辑器 => 创建html⽂件 写⼊以下代码
css 样式表结构
:root{--base-color: red;}
.container{ color: var(--base-color);}
html结构
<div class="container" >红⾊字体</div>
效果：页⾯中, 具有.container样式的div的字体是red⾊值。
这是css 的⾃定义属性的普通⽤法。
⽤法：
带有前缀--的属性名，⽐如--example--name，表⽰的是带有值的⾃定义属性，其可以通过  函数在全⽂档范围内复⽤的。
⽽
:root选择器是声明的CSS⾃定义属性，其作⽤域的范围是全局范围，也就是全局作⽤域。
当然可以⽤⽗div的样式类声明⼀个⾃定义属性，给⼦类⽤
以下是如何在样式表以外的地⽅，动态操作⾃定义属性
内联⽤法
<div class="container" >红⾊字体</div> // 这⾥会是蓝⾊字体
js操作⽤法
var dom = ElementById("thirdParagraph");
// ⾃定义属性设置值
dom.style.setProperty("--first-color","red")
dom.style.cssText='--first-color:red'
注意
不能直接dom.style["⾃定义属性名"]=value；进⾏设置
// 普通属性设置，也可⽤setProperty,cssText
dom.style.backgroudColor="red"
⼩程序⽤法，不⽀持dom操作，只能通过style传值
cssclass属性
<div class="container" >附带MDN链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。