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

时间 2019-11-09

标签 css 变量赋值取值四种方式设置内联样式 root 选择器 html 栏目 CSS 繁體版

原文原文链接

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

第一次知道:root是在使用css变量的时候，当时的写法是:root后的花括号里面声明的变量，以下：html

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

根据MDN的描述：wordpress

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

为了验证:root和html的优先级,我作了如下测试：测试

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

结果spa

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

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

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

结果

仍是内联样式的优先级比较高htm

因此得出结论：blog

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

不过咱们发现另外一个现象，两种获取变量的值得结果不同，一个是“4px”,一个是“”，这是为何呢？难道document.documentElement.style只能用来获取内联样式的值吗？咱们再作个试验，用js设置他的值，而后再用两种方式获取。ip

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