CSS變量是該語言的非常受歡迎的補充，盡管它們非常基礎(chǔ)。當(dāng)然，我們可以使用SASS或手寫筆，但是語言永遠不應(yīng)該依賴依賴于框架和工具包來完成我們所需要的開發(fā)人員。就像網(wǎng)頁的其他部分一樣，您可以獲取和操作CSS變量值-讓我們來看看如何！

設(shè)置和使用CSS變量

使用本機CSS變量的傳統(tǒng)方法是將其添加到root：

:root {     --my-variable-name: #999999; }

簡單。還請記住，CSS變量遠不及SASS，手寫筆等中的變量強大。

獲取CSS變量的值

要在窗口中檢索CSS變量的值，請使用getComputedStyle 和getPropertyValue：

getComputedStyle(document.documentElement)     .getPropertyValue('--my-variable-name'); // #999999

計算出的變量值以字符串形式返回。

設(shè)置CSS變量的值

要使用JavaScript設(shè)置一個CSS變量的值，可以使用setProperty 上documentElement的style 屬性：

document.documentElement.style     .setProperty('--my-variable-name', 'pink');

您將立即看到在使用該變量的所有位置應(yīng)用了新值。

我已經(jīng)預(yù)料到需要使用令人惡心的駭客才能使用JavaScript完成CSS變量操作，所以我很高興如上所述那樣簡單！