【CSS】变量用法（以及在 js 中使用）

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。
使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

一、css 中使用

• 传统方式

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

• 使用 var() 函数的语法

/* 我们声明两个全局变量（--blue 和 --white） */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
/* 我们使用 var() 函数稍后在样式表中插入变量的值 */
body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

• var() 函数的语法如下：

// name	必需。变量名（以两条破折号开头）。
// value 可选。回退值（在未找到变量时使用）。
var(name, value)

// 变量名称必须以两个破折号（--）开头，且区分大小写！

• 基本用法：

1. 首先：CSS 变量可以有全局或局部作用域。

2. 全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

3. 如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

4. 如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

二、js 中使用

• CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。

// 获取根元素
var r = document.querySelector(':root');

// 创建获取变量值的函数
function myFunction_get() {
  // 获取根的样式（属性和值）
  var rs = getComputedStyle(r);
  // 打印 --blue 变量的值
  console.log("--blue =", rs.getPropertyValue('--blue'))	// #1e90ff
}

// 创建设置变量值的函数
function myFunction_set() {
  // 把变量 --blue 的值设置为另一个值（在这里是 "lightblue"）
  r.style.setProperty('--blue', 'lightblue');
}

• 案例：https://blog.csdn.net/qq_45677671/article/details/131615111