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

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

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

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

簡(jiǎn)單。還請(qǐng)記住，CSS變量遠(yuǎn)不及SASS，手寫筆等中的變量強(qiáng)大。

獲取CSS變量的值

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

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

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

設(shè)置CSS變量的值

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

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

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

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