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

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

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

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

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

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

根據(jù)MDN的描述：

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

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

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

結(jié)果

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



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

結(jié)果

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

所以得出結(jié)論：

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

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



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

結(jié)果

發(fā)現(xiàn)

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

結(jié)論

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

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

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

結(jié)果

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

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

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

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

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