CSS---css全局变量与局部变量

CSS变量为自定义属性，由自定义编辑设定值【--main--bg-color:#ddd;】,通过var()函数来获取值【color:var(--main-bg-color);】。css变量可在css文档中重复使用，当需要修改时，仅需要修改设定值，设定的变量名最好是设置为语义化的标签。

1、在css中设定全局变量和局部变量

2、.在js中获取和设置css变量

// 1.在js中获取css变量
const box = document.querySelector(".box")
const boxStyles = getComputedStyle(box)
const boxBorderColor = boxStyles.getPropertyValue("--box-border-color")
console.log(boxBorderColor)

// 2. 在js中设置css变量
box.style.setProperty("--box-bg-color", "#e4e4e4")