CSS自定义属性（CSS变量）

简单介绍css自定义属性的用法
参考资料：https://www.w3cplus.com/css3/css-properties-in-depth.html

currentColor

最简单的一个css自定义属性:currentColor

div{
  color:red;
  border:1px solid currentColor;
}

–variable-name: 值

:root{
	--bg-color:red;
	--main-color:green;
}
p{
	background:var(--bg-color);
	color:var(--main-color);
}

【点击查看代码】

大小写敏感

css自定义属性对大小写敏感，大小写不同，代表不同的属性名

:root{
  --bg-color:red;
  --bgColor:yellow;
  --bgcolor:blue;
}

默认值

如果没有指定--p-margin的值,则默认值为0 0 10px

p { 
	margin: var(--p-margin, 0 0 10px);
}

作用域

将css自定义属性写在不同的作用域，使其只有在特定的容器内生效

:root {
  --main-bg: black;
  --main-color: white;
}
p {
  background: var(--main-bg);
  color: var(--main-color);
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
}
.dark {
  --main-bg: aqua;
  --main-color: orange;
}

在class="dark"这个作用域下，拿到的是.dark里的变量值，而不是:root下的值

【点击查看代码】

伪类作用域

p {
  --bg-color: red;
  --color: green;
  background: var(--bg-color);
  color: var(--color);
  transition: .6s;
  padding: 8px 0;
  text-align: center;
}
p:hover {
  --bg-color: aqua;
  --color: black;
}

【点击查看代码】

变量组合

–variable-name: var(–another-variable-name);

:root{
  --main-color:blue;
  --main-bg:var(--main-color);
}
p{
  background:var(--main-bg);
}

值的计算

变量的值不能直接计算

:root{
  --main-size:18px;
}
p{
  font-size:var(--main-size)*2; 错误！！！不能直接计算
}

可以使用calc()实现值的计算

:root {
  --main-size: 18px;
}
p {
  font-size: calc( var(--main-size)*2 );
}

【点击查看代码】

用js操作自定义属性

读/写自定义属性(getPropertyValue, setProperty)

//获取
const root = document.documentElement;
const rootStyles = getComputedStyle(root);
var mainBg = rootStyles.getPropertyValue('--main-bg').trim();
console.log(mainBg)

//赋值
const root = document.documentElement;
root.style.setProperty('--main-bg','orange');

【点击查看代码】

换肤功能

css自定义属性 配合 js，可以很方便地实现换肤功能，而不需要创建多个样式表

let root = document.documentElement;
green.onclick = function() {
  root.style.setProperty('--main-bg', 'green');
}
blue.onclick = function() {
  root.style.setProperty('--main-bg', 'blue');
}

【点击查看代码】