css變量賦值和取值的四種方式(js設(shè)置值、內(nèi)聯(lián)樣式、:root選擇器、html選擇器)

ddongjian0000 發(fā)布于2019-08-30 15:55 / 2143人閱讀

摘要：對于來說，表示元素，除了優(yōu)先級更高之外，與選擇器相同。再做實驗，前后分別設(shè)置兩個空格時，獲取到的值只有一個空格。結(jié)論設(shè)置值內(nèi)聯(lián)樣式選擇器選擇器也都是會把多余空格變成一個空格。

今天突然發(fā)現(xiàn)一個有趣的現(xiàn)象
document.querySelector(":root") === document.documentElement

第一次知道:root是在使用css變量的時候，當(dāng)時的寫法是:root后的花括號里面聲明的變量，如下：

:root {
  --rect-width: 4px;
}

根據(jù)MDN的描述：

:root 這個 CSS 偽類匹配文檔樹的根元素。對于 HTML 來說，:root 表示  元素，除了優(yōu)先級更高之外，與 html 選擇器相同。

為了驗證:root和html的優(yōu)先級,我做了以下測試：

:root {
  --rect-width: 4px;
}
html {
  --rect-width: 6px;
}

結(jié)果

再驗證一下:root和內(nèi)聯(lián)樣式的優(yōu)先級



:root {
  --rect-width: 4px;
}

結(jié)果

還是內(nèi)聯(lián)樣式的優(yōu)先級比較高

所以得出結(jié)論：

內(nèi)聯(lián)樣式>:root選擇器>html選擇器

不過我們發(fā)現(xiàn)另一個現(xiàn)象，兩種獲取變量的值得結(jié)果不一樣，一個是“4px”,一個是“”，這是為什么呢？難道document.documentElement.style只能用來獲取內(nèi)聯(lián)樣式的值嗎？我們再做個試驗，用js設(shè)置他的值，然后再用兩種方式獲取。



document.documentElement.style.setProperty("--rect-width", "7px");

結(jié)果

發(fā)現(xiàn)

1.當(dāng)有內(nèi)聯(lián)樣式或者js設(shè)置的值時：document.documentElement.style.getPropertyValue獲取到的是實際的值
2.當(dāng)只有:root選擇器或者h(yuǎn)tml選擇器時，document.documentElement.style.getPropertyValue獲取到的值為空

結(jié)論

1.document.documentElement.style只能獲取內(nèi)聯(lián)屬性的值
    (根據(jù)參考鏈接2，style確實只能獲取內(nèi)聯(lián)樣式的屬性)
2.js設(shè)置的優(yōu)先級大于內(nèi)聯(lián)樣式優(yōu)先級，這也是理所應(yīng)當(dāng)?shù)?

另外，我們還發(fā)現(xiàn)，獲取到的值包含空格。js設(shè)置時，值的字符串沒有空格，獲取到的也沒有空格。
再做個試驗，js設(shè)置如果前后也設(shè)置空格的話也會獲取到空格。
再做實驗，前后分別設(shè)置兩個空格時，獲取到的值只有一個空格。

document.documentElement.style.setProperty("--rect-width", "  7px  ");

結(jié)果

內(nèi)聯(lián)樣式、:root選擇器、html選擇器也都是會把多余空格變成一個空格。
結(jié)論

js設(shè)置值、內(nèi)聯(lián)樣式、:root選擇器、html選擇器也都是會把多余空格變成一個空格。應(yīng)該是類似于html頁面的元素會把多余空格變成一個空格。

針對四種方式對css變量賦值和取值時，最終結(jié)論:

1.document.querySelector(":root") === document.documentElement
2.優(yōu)先級： js設(shè)置值>內(nèi)聯(lián)樣式>:root選擇器>html選擇器
3.document.documentElement.style.getPropertyValue只能獲取內(nèi)聯(lián)樣式的值
4.getComputedStyle(document.documentElement).getPropertyValue獲取到的始終是實際的值
5.四種方式賦值時，如果值包含多個空格，都是總會把多余空格變成一個空格。應(yīng)該是類似于html頁面的元素會把多余空格變成一個空格。

參考鏈接：
1.MDN之:root https://developer.mozilla.org...:root
2.MDN之style https://developer.mozilla.org...
3.張鑫旭大大之getComputedStyle https://www.zhangxinxu.com/wo...