javascriptvarcss,CSS⾃定义属性（即CSS变
量）“var（）”和“：root”
⽰例：
:root {
--bg-color: #3a3a3a;
}
body {
background-color: var(--bg-color);
}
var()
var()函数⽤于插⼊CSS变量的值。
:
root
:root是⼀个伪类，表⽰⽂档根元素，⾮IE及ie8及以上浏览器都⽀持，在:root中声明相当于全局属性，只要当前页⾯引⽤了:root segment 所在⽂件，都可以使⽤var()来引⽤
传统⽅式：
以下⽰例显⽰了在样式表中定义某些颜⾊的传统⽅式(通过为每个特定元素定义要使⽤的颜⾊)：
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
htmlbutton属性
}
var()函数的语法
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
var()函数的语法
该var()函数⽤于插⼊CSS变量的值。
该var()函数的语法如下：
var(name, value)
注意：变量名必须以两个破折号(-)开头，并且区分⼤⼩写！
var()如何⼯作
⾸先：CSS变量可以具有全局范围或局部范围。
全局变量可以在整个⽂档中访问/使⽤，⽽局部变量只能在声明它的选择器内部使⽤。
要创建具有全局作⽤域的变量，请在:root 选择器中声明它。在:root选择⽂档的根元素相匹配。
要创建具有局部作⽤域的变量，请在将要使⽤它的选择器中声明它。
下⾯的⽰例与上⾯的⽰例相同，但是在这⾥我们使⽤该var()函数。
⾸先，我们声明两个全局变量(–blue和–white)。然后，我们使⽤该 var()函数稍后在样式表中插⼊变量的值使⽤var()的优点是：
使代码更易于阅读(更易于理解)
使更改颜⾊值更加容易
要将蓝⾊和⽩⾊更改为较柔和的蓝⾊和⽩⾊，您只需要更改两个变量值
javascript获取⾃定义属性
var rootElement = document.documentElement;
var styles = getComputedStyle(rootElement);
var mainColor = PropertyValue('--color-text');
console.log(String(mainColor).trim())
javascript设置⾃定义属性
var rootElement = document.documentElement; rootElement.style.setProperty('--color-text','#ccc');

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