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

時間 2019-11-09

標籤 css 變量賦值取值四種方式設置內聯樣式 root 選擇器 html 欄目 CSS 简体版

原文原文鏈接

今天忽然發現一個有趣的現象
document.querySelector(':root') === document.documentElementcss

第一次知道:root是在使用css變量的時候，當時的寫法是:root後的花括號裏面聲明的變量，以下：html

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

根據MDN的描述：wordpress

:root 這個 CSS 僞類匹配文檔樹的根元素。對於 HTML 來講，:root 表示 <html> 元素，除了優先級更高以外，與 html 選擇器相同。

爲了驗證:root和html的優先級,我作了如下測試：測試

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

結果spa

再驗證一下:root和內聯樣式的優先級code

<html lang="en" style="--rect-width: 5px;">

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

結果

仍是內聯樣式的優先級比較高htm

因此得出結論：blog

內聯樣式>:root選擇器>html選擇器

不過咱們發現另外一個現象，兩種獲取變量的值得結果不同，一個是「4px」,一個是「」，這是爲何呢？難道document.documentElement.style只能用來獲取內聯樣式的值嗎？咱們再作個試驗，用js設置他的值，而後再用兩種方式獲取。ip

<html lang="en" style="--rect-width: 5px;">

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

結果文檔

發現

1.當有內聯樣式或者js設置的值時：document.documentElement.style.getPropertyValue獲取到的是實際的值
2.當只有:root選擇器或者html選擇器時，document.documentElement.style.getPropertyValue獲取到的值爲空

結論

1.document.documentElement.style只能獲取內聯屬性的值
    (根據參考連接2，style確實只能獲取內聯樣式的屬性)
2.js設置的優先級大於內聯樣式優先級，這也是理所應當的

另外，咱們還發現，獲取到的值包含空格。js設置時，值的字符串沒有空格，獲取到的也沒有空格。
再作個試驗，js設置若是先後也設置空格的話也會獲取到空格。
再作實驗，先後分別設置兩個空格時，獲取到的值只有一個空格。

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

結果

內聯樣式、:root選擇器、html選擇器也都是會把多餘空格變成一個空格。
結論

js設置值、內聯樣式、:root選擇器、html選擇器也都是會把多餘空格變成一個空格。應該是相似於html頁面的元素會把多餘空格變成一個空格。

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

1.document.querySelector(':root') === document.documentElement
2.優先級： js設置值>內聯樣式>:root選擇器>html選擇器
3.document.documentElement.style.getPropertyValue只能獲取內聯樣式的值
4.getComputedStyle(document.documentElement).getPropertyValue獲取到的始終是實際的值
5.四種方式賦值時，若是值包含多個空格，都是總會把多餘空格變成一個空格。應該是相似於html頁面的元素會把多餘空格變成一個空格。

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