今天突然发现一个有趣的现象document.querySelector(':root')===第一次document。documentElement知道：root是在使用css变量时。当时是这样写的：根后面花括号声明的变量，如下：:root{--rect-width:4px;}根据MDN的描述::root这个CSS伪类匹配根文档树的元素。对于HTML，:root代表元素，与html选择器相同，只是具有更高的优先级。为了验证：root和html的优先级，我做了如下测试::root{--rect-width:4px;}html{--rect-width:6px;}结果再次验证：root和inlinestylePriority:root{--rect-width:4px;}结果是内联样式的优先级比较高，所以结论是：innerLinkstyle>:rootselector>htmlselector但是我们发现了另外一个现象，两个获取到的变量的值是不一样的，一个是“4px”，一个是“”，这是为什么呢？document.documentElement.style只是用来获取内联样式的值吗？我们再做个实验，用js设置它的值，然后通过两种方式获取。document.documentElement.style.setProperty('--rect-width','7px');原来是1.当有内联样式或者js设置的值时：document.documentElement.style.getPropertyValue得到的是实际值2.当只有：root选择器或者html选择器时，document.document.documentElement.style.getPropertyValue得到的值。documentElement.style.getPropertyValue为空结论1.document.documentElement.style只能获取到inline属性的值（根据参考链接2，style只能获取到inline样式的属性）2.js设置的优先级是大于内联样式的优先级，这也是理所当然的另外，我们还发现获取的值中包含空格。设置js时，value字符串没有空格，得到的也没有空格。再做个实验，如果js设置前后也设置了空格，也会得到空格。再做个实验，当前后设置两个空格时，得到的值只有一个空格。document.documentElement.style.setProperty('--rect-width','7px');因此，内联样式、:root选择器和html选择器也会将多余的空间变成空格。结论JS设置值、内联样式、:root选择器和html选择器也会将多余的空间变成一个空间。应该类似于html页面的元素会将多余的空格变成一个空格。四种方式给css变量赋值取值时，最终结论：1.document.querySelector(':root')===document.documentElement2.优先级：js设置值>内联样式>:根选择器>html选择器3.document.documentElement.style.getPropertyValue只能获取内联样式的值4.getComputedStyle(document.documentElement).getPropertyValue总是获取实际值5.四种方式赋值时，如果该值包含多个空格，总是将多余的空间变成一个空格。应该类似于html页面的元素会将多余的空格变成一个空格。参考链接：1.MDN的：roothttps://developer.mozilla.org...:root2.MDN的stylehttps://developer.mozilla.org...3.张新旭的getComputedStylehttps://www.zhangxinxu.com/wo...
