css变量（JavaScript修改css变量）

一 变量的声明

声明变量的时候，变量名前面要加两根连词线（–）。

:root {
	--font-size: 14px;
}
body {
  --color: #FFFFFF;
  --border-color: #EDEDED;
}

二 var()函数

var()函数用于读取变量。

.box {
  color: var(--color);
  border: 1px solid var(--border-color);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

.box {
  color: var(--color, #FFFFFF);
}

三 JavaScript 操作 CSS 变量

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');