css自定义属性 - 面试必备上例中自定义属性--color的作用域是class包含container的元素以及其元素下

为什么要了解css自定义属性？在声明式语言中引入变量，在一些特定场景极大增强了css的灵活性。

使用方法

约定以--开头的为自定义属性，如下声明的--color：

.container {
    --color: blue;
}

声明的自定义属性怎么使用呢？使用var()获取自定义属性的值

p {
    background-color: var(--color,red);     //第二个参数为缺省值：当--color无效时，使用red
}

注意点:

作用域上例中自定义属性--color的作用域是class包含container的元素以及其元素下的所有子孙元素。换言之，如果上例中p元素沿着父级作用域链未找到--color的声明，就会使用red作为默认值。如果想要--color作为全局作用域的变量使用，可以设置如下：
```
:root {
    --color: red;
}
```
如果某个模块中的元素想要有自己统一--color，只需在模块样式中重新声明即会在其模块内覆盖父作用域的值。
自定义属性（变量）区分大小写

行内声明的方式如下方式设置背景色是可行的：

<style>
    .container {
        background: var(--bgColor, #fff);
    }
</style>

<div class="container" style="--bgColor: pink">

结合calc函数，结合多个自定义属性
- calc：用于动态计算长度值。
  - 支持 "+", "-", "*", "/" 运算；
  - 运算符前后都需要保留一个空格(笔者测试仅+、-不留空格会出现解析问题，不过规范起见，最好都保留)，例如：width: calc(100% - 10px)；
- 多个自定义属性相互引用
```
:root {
  --font-base: 20px;
 }
 p {
  --font-self: calc(var(--font-base) * 2);
  font-size: var(--font-self);
 }
```

自定义属性值的获取和设置

获取--color自定义属性值

//getComputedStyle  | getPropertyValue
getComputedStyle(document.querySelector('.container')).getPropertyValue('--color').trim();

设置--color自定义属性值

document.body.style.setProperty('--color', val)

自定义属性值一旦被改变，所有与之相关联的 CSS 属性都会更新，即轻松实现批量更新元素属性值。

应用：主题色

<style>
 :root {
      --color: red;
     --background: pink;
 }
 p, h1 {
       color: var(--color);
       background: var(--background) 
 }
 </style>

<script>
 function changeColor(val) {
      console.log(document.body.style.setProperty('--color', val))
 }
 </script>

<h1>我的第一个标题</h1>
<p>这是文本内容</p>
<button onClick="changeColor('blue')">蓝色主题</button>
<button onClick="changeColor('yellow')">黄色主题</button>

欢迎关注公众号，不定时更新哦~