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

LinkedME2016 发布于2019-08-02 14:14 / 1610人阅读

摘要：对于来说，表示元素，除了优先级更高之外，与选择器相同。再做实验，前后分别设置两个空格时，获取到的值只有一个空格。结论设置值内联样式选择器选择器也都是会把多余空格变成一个空格。

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

GPU云服务器云服务器样式选择器 css选择器基础选择器css html选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53673.html

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

摘要：对于来说，表示元素，除了优先级更高之外，与选择器相同。再做实验，前后分别设置两个空格时，获取到的值只有一个空格。结论设置值内联样式选择器选择器也都是会把多余空格变成一个空格。今天突然发现一个有趣的现象document.querySelector(:root) === document.documentElement showImg(https://segmentfault.com/i...

ddongjian0000 2019-08-30 15:55 评论0 收藏0
前端--CSS

摘要：一介绍是的简称中文称为层叠样式表用来控制网页数据的表现可以使网页的表现与数据内容分离，层叠样式表定义如何显示元素。用于控制内容与边框之间的距离边框围绕在内边距和内容外的边框。内容盒子的内容，显示文本和图像。一.CSS介绍 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. CSS（CascadingStyl...

番茄西红柿 2019-04-23 13:25 评论0 收藏0
CSS基础知识整理

摘要：语法基础语法规则由两个主要部分构成选择器以及一条或多条声明。语法名属性属性值属性属性值属性属性值选择器选择器用于描述一组元素的样式，也叫做类选择器。后代选则器又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。 1 什么是CSS？ CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高...

Edison 2019-08-30 11:09 评论0 收藏0
2019js基础面试题整理复习

摘要：复习整理有什么新特性新增语义化标签等新增用于绘画的元素用于媒介回放的和元素本地缓存有更好支持和是什么，文档是什么是用来描述网页的一种超文本标记语言，文档也被成为网页，它包含标签和纯文本是什么它不是标签，它为浏览器提供一种信息声明，告诉浏览器复习整理 html 1.html5有什么新特性？新增语义化标签、等新增用于绘画的元素用于媒介回放的video和aud...

silencezwm 2019-08-30 15:44 评论0 收藏0
2019js基础面试题整理复习

摘要：复习整理有什么新特性新增语义化标签等新增用于绘画的元素用于媒介回放的和元素本地缓存有更好支持和是什么，文档是什么是用来描述网页的一种超文本标记语言，文档也被成为网页，它包含标签和纯文本是什么它不是标签，它为浏览器提供一种信息声明，告诉浏览器复习整理 html 1.html5有什么新特性？新增语义化标签、等新增用于绘画的元素用于媒介回放的video和aud...

yangrd 2019-08-26 10:42 评论0 收藏0