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

LinkedME2016 發布于2019-08-02 14:14 / 1611人閱讀

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

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

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

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

根據MDN的描述：

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

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

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

結果

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



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

結果

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

所以得出結論：

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

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



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...

GPU云服務器云服務器樣式選擇器 css選擇器基礎選擇器css html選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53673.html

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

摘要：對于來說，表示元素，除了優先級更高之外，與選擇器相同。再做實驗，前后分別設置兩個空格時，獲取到的值只有一個空格。結論設置值內聯樣式選擇器選擇器也都是會把多余空格變成一個空格。今天突然發現一個有趣的現象document.querySelector(:root) === document.documentElement showImg(https://segmentfault.com/i...

ddongjian0000 2019-08-30 15:55 評論0 收藏0
前端--CSS

摘要：一介紹是的簡稱中文稱為層疊樣式表用來控制網頁數據的表現可以使網頁的表現與數據內容分離，層疊樣式表定義如何顯示元素。用于控制內容與邊框之間的距離邊框圍繞在內邊距和內容外的邊框。內容盒子的內容，顯示文本和圖像。一.CSS介紹 CSS是Cascading Style Sheets的簡稱,中文稱為層疊樣式表,用來控制網頁數據的表現,可以使網頁的表現與數據內容分離. CSS（CascadingStyl...

番茄西紅柿 2019-04-23 13:25 評論0 收藏0
CSS基礎知識整理

摘要：語法基礎語法規則由兩個主要部分構成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高...

Edison 2019-08-30 11:09 評論0 收藏0
2019js基礎面試題整理復習

摘要：復習整理有什么新特性新增語義化標簽等新增用于繪畫的元素用于媒介回放的和元素本地緩存有更好支持和是什么，文檔是什么是用來描述網頁的一種超文本標記語言，文檔也被成為網頁，它包含標簽和純文本是什么它不是標簽，它為瀏覽器提供一種信息聲明，告訴瀏覽器復習整理 html 1.html5有什么新特性？新增語義化標簽、等 ? 新增用于繪畫的元素 ? 用于媒介回放的video和aud...

silencezwm 2019-08-30 15:44 評論0 收藏0
2019js基礎面試題整理復習

摘要：復習整理有什么新特性新增語義化標簽等新增用于繪畫的元素用于媒介回放的和元素本地緩存有更好支持和是什么，文檔是什么是用來描述網頁的一種超文本標記語言，文檔也被成為網頁，它包含標簽和純文本是什么它不是標簽，它為瀏覽器提供一種信息聲明，告訴瀏覽器復習整理 html 1.html5有什么新特性？新增語義化標簽、等 ? 新增用于繪畫的元素 ? 用于媒介回放的video和aud...

yangrd 2019-08-26 10:42 評論0 收藏0