css 自定义属性

css 中使用

• 自定义属性必须通过 --x 的格式申明
• 用 var(–x) 调用
• :root{} 下是全局
• 声明块下是局域
• 自定义属性可以覆盖或继承

/* -- 是不能少的 */

:root {
	--swq: #f00;
}

body {
	--swq: #0f0;
}

h1 {
	--swq: #00f;
	color: var(--swq); /* #00f */
}

js 中使用

css 的自定义属性可以通过 js 的 setProperty 控制
要注意自定义属性名仍然要以 “–” 开头

// 无效
document.documentElement.style.setProperty("defg", "3px")

// 有效
document.documentElement.style.setProperty("--defg", "3px")

// 可以设常规 css 属性
document.documentElement.style.setProperty("background-color", "red")

// style 读不出自定义属性
document.documentElement.style["defg"]
// undefined

参考资料:
CSS var() 函数 | 菜鸟教程
配合 js 使用案例
使用CSS自定义属性（变量） - CSS（层叠样式表） | MDN

end