css声明变量 :root 伪类以及 getProperty

作者: 兮木兮木 | 来源:发表于2020-03-08 20:40 被阅读0次

css声明变量 :root 伪类以及 getProperty
JavaScript01
2018-08-23 CSS3的root选择器
CSS3中的自定义变量样式用法
css之：root
伪元素和伪类
css伪元素
css伪类(Pseudo-classes) & after be
part2: CSS基础-练习
CSS伪类：first-child

:root 伪类及css声明变量

:root选择器用匹配文档的根元素，在HTML中根元素始终是HTML元素。但是:root的权重高于html

声明css变量，一般声明在:root根元素上，这样文档全局都可以取到

声明的变量名以--开头比如--text-color

在其他css样式中引用变量用var(--text-color)

相同的css变量，子级会覆盖:root级，也就是说，当某个元素取css变量时，会找最近的声明变量的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*:root选择器用匹配文档的根元素，在HTML中根元素始终是HTML元素。但是:root的权重高于html*/
    :root {
      /*在页面中html中会显示此属性*/
      background-color: #00c9db;
      /*声明css变量，一般声明在:root跟元素上，这样文档全局都可以取到*/
      --text-color: orange;
      --font-size: 50px;
    }
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    html {
      /*:root 权重高，此html的背景色会被:root 的属性覆盖*/
      background-color: #0f6674;
    }
    .box {
      /*相同的css变量，子级会覆盖:root级，也就是说，当某个元素取css变量时，会找最近的声明变量的元素*/
      --font-size: 30px;
      height: 400px;
      width: 700px;
      background-color: red;
      margin: 30px auto;
    }
    .box > div {
      font-size: var(--font-size);
      color: var(--text-color);
    }
    .box1 {
      font-size: var(--font-size);
    }
  </style>
</head>
<body>
<div class="box">
  box
  <div>
    inner
  </div>
</div>
<div class="box1">
  box1
</div>

获取元素的css属性

getPropertyValue //获取元素的某个css属性值
setProPerty  //设置元素的css属性
removeProperty  //移除元素的css属性

例如：
document.documentElement.style.getPropertyValue('font-size') //获取字体大小js
document.documentElement.style.getPropertyValue('--font-size') //也可以是css变量
这种方式只能获得内联样式，如果无内联样式则获取到的值为空，与document.documentElement.style.fontSize相同，都是只能获取内联样式属性值

getComputedStyle（node） //此方法获取元素的所有样式表，是一个大对象

//如果getPropertyValue方法用在此处则可以获取到元素的真实样式
//（即哪个样式的权重高，生效的样式，获取的就是那个值）
getComputedStyle(document.documentElement).getPropertyValue()

结语

1.document.querySelector(':root') === document.documentElement
2.优先级： js设置值>内联样式>:root选择器>html选择器
3.document.documentElement.style.getPropertyValue只能获取内联样式的值
4.getComputedStyle(document.documentElement).getPropertyValue获取到的始终是实际的值