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

今天突然发现一个有趣的现象
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...