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