Css var 的基础使用

Css var

语法

var(custom-property-name, value)
- custom-property-name 必须 变量必须以 --开头 后面可以是英文、数字连接符，区分大小写
- value 不必须 默认值 当 custom-property-name 不存在时使用

优先级

style > id > class > tag > * > :root

伪类 :root 相当于文档根元素 html 但是优先级更高

使用

:root {
  --color: red;
}
body {
  --color: #fff;
}
* {
  margin: 0;
  padding: 0;
}
.canvas {
  width: 100%;
  height: 100%;
}
.div {
  --color: yellow;
  width: 100%;
  height: 50vh;
  background-color: var(--color);
}
#div {
  --color: '#fff';
}


<div style="width: 100%; height: 100%; background: rgba(0,0,0, .3);">
  <div class="div" id="div" style="--color: blue;"></div>
</div>

修改

// 全局
document.documentElement.style.setProperty('--color', '#6e6e6e')
// 局部
document.getElementsByClassName('div')[0].style.setProperty('--color', 'black');