定义变量
–变量名:变量值
--myvarible:red
全局变量 使用 :root定义
:root{
--myvarible:red
}
使用变量
color:var(--myvarible)
//变量默认值 在--myvarible未定义的时候,使用va()函数第二个参数
color:var(--myvarible,blue)
字符串–可以直接拼接
//定义
:root{
--a:'hello';
--b:'world';
}
//使用
.my::after{
content:var(--a)var(--b)
}
非字符串–不能直接拼接(使用calc()函数计算)
//定义
:root{
--c:30;
}
//使用
.my{
font-size:calc(var(--c) * 1px)
}
js控制变量改变样式
//选择选择器
var root = document.querySelector(":root");
//获取属性
var styles = getComputedStyle(root);
//获取属性值
var mycolor = styles.getPropertyValue("--myvarible").trim(); //trim()函数去除空格
//设置属性值
root.style.setProperty("--myvarible","blue")