CSS_css变量，css自定义属性

定义变量

–变量名:变量值

	--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")