css变量赋值和取值的四种方式(js设置值、内联样式、:root选择器、html选择器)
今天突然发现一个有趣的现象
document.querySelector(':root') === document.documentElement
第一次知道:root是在使用css变量的时候，当时的写法是:root后的花括号里面声明的变量，如下：
:root {
--rect-width: 4px;
}根据MDN的描述：
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
为了验证:root和html的优先级,我做了以下测试：
:root {
--rect-width: 4px;
}
html {
--rect-width: 6px;
}结果
再验证一下:root和内联样式的优先级
<html lang="en" style="--rect-width: 5px;">
:root {
--rect-width: 4px;
}结果
还是内联样式的优先级比较高
所以得出结论：
内联样式>:root选择器>html选择器
不过我们发现另一个现象，两种获取变量的值得结果不一样，一个是“4px”,一个是“”，这是为什么呢？难道document.documentElement.style只能用来获取内联样式的值吗？我们再做个试验，用js设置他的值，然后再用两种方式获取。
<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...
相关推荐
yutou0 2020-10-17
codedecode 2020-11-14
summerinsist 2020-08-21
87901735 2020-08-19
benico 2020-08-19
Rain 2020-08-15
RemixGdc 2020-08-15
Jaystrong 2020-08-02
KFLING 2020-08-01
zhangll00 2020-07-29
elitechen 2020-07-28
suosuo 2020-07-28
benico 2020-07-28
xiyoukeke 2020-07-28
小惠 2020-07-27
此处省略三千字 2020-07-20
泥淖 2020-07-19
安得情怀似旧时 2020-07-06
sunzhihaofuture 2020-07-04