css变量赋值和取值的四种方式(js设置值、内联样式、:root选择器、html选择器)

罗举

今天突然发现一个有趣的现象
document.querySelector(':root') === document.documentElement

clipboard.png
第一次知道:root是在使用css变量的时候,当时的写法是:root后的花括号里面声明的变量,如下:

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

根据MDN的描述:

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,除了优先级更高之外,与 html 选择器相同。

为了验证:root和html的优先级,我做了以下测试:

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

结果

clipboard.png
再验证一下:root和内联样式的优先级

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

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

结果
clipboard.png
还是内联样式的优先级比较高

所以得出结论:

内联样式>:root选择器>html选择器

不过我们发现另一个现象,两种获取变量的值得结果不一样,一个是“4px”,一个是“”,这是为什么呢?难道document.documentElement.style只能用来获取内联样式的值吗?我们再做个试验,用js设置他的值,然后再用两种方式获取。

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

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

结果

clipboard.png
发现

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  ');

结果
clipboard.png
内联样式、: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...

阅读 4.8k
9 声望
2 粉丝
0 条评论
9 声望
2 粉丝
文章目录
宣传栏