自定义属性（CSS 变量）

约 256 字小于 1 分钟

布欧-Lewyon

2026-05-16

首页 › CSS › 进阶话题 › 自定义属性（CSS 变量）

CSS 自定义属性（常称为 CSS 变量）让你在 CSS 中定义可复用的值，且能通过 JavaScript 动态修改。

定义与使用

:root {
  --primary: #1890ff;
  --primary-hover: #40a9ff;
  --spacing: 16px;
  --radius: 8px;
}

.button {
  background: var(--primary);
  padding: var(--spacing);
  border-radius: var(--radius);
}

.button:hover {
  background: var(--primary-hover);
}

回退值

.element {
  color: var(--undefined-var, #333);
  /* 第一个参数不存在时，使用第二个参数 */
}

在 calc() 中使用

:root { --gap: 8px; }

.grid {
  display: grid;
  gap: var(--gap);
  padding: calc(var(--gap) * 2);
}

JavaScript 操作

// 读取
const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary');

// 修改
document.documentElement.style.setProperty('--primary', '#52c41a');

主题切换

:root {
  --bg: white;
  --text: #333;
}

[data-theme="dark"] {
  --bg: #1f1f1f;
  --text: #e0e0e0;
}

body {
  background: var(--bg);
  color: var(--text);
}

小结

语法	含义
`--name: value`	定义变量
`var(--name)`	使用变量
`var(--name, fallback)`	使用变量（带回退）
`setProperty('--name', val)`	JS 修改变量

上一节：视口单位与流式排版下一节：CSS 函数详解