css如何使用CSS变量提高样式灵活性_动态改变页面样式-css教程

css变量以–开头，需在:root等选择器中声明，用var()函数调用并支持回退值；可通过js的setproperty动态修改、getpropertyvalue读取；媒体查询中须重设变量而非仅引用；适合运行时主题切换等场景，非编译期静态配置。

如何在CSS中声明和使用--color-primary这类变量

CSS变量（又称自定义属性）必须以--开头，只能在选择器作用域内生效。最常用的是在:root里声明全局变量，这样整个文档都能访问。

声明示例：

:root {
  --color-primary: #007bff;
  --spacing-md: 1rem;
  --border-radius-sm: 4px;
}

使用时通过var()函数读取，支持回退值：

.btn {
  background-color: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm, 2px); /* 2px是回退值 */
}

• 变量名区分大小写，--Color-Primary和--color-primary是两个不同变量
• 不能直接在HTML的style属性里写var(--x)，但可以写--x: value来设置变量
• 变量值不支持自动单位换算，var(--spacing-md) * 2会报错，需用calc(var(--spacing-md) * 2)

如何用JavaScript动态修改--theme-mode切换深色/浅色主题

变量本质是CSS属性，所以能被JS读写——关键在于操作style对象或document.documentElement的style属性。

立即学习“前端免费学习笔记（深入）”；

切换主题的典型写法：

function setTheme(mode) {
  document.documentElement.style.setProperty('--theme-mode', mode);
  // 同时可触发类名变更用于后备样式
  document.documentElement.classList.toggle('dark', mode === 'dark');
}

注意：setProperty只影响内联样式层，优先级高于外部CSS文件中的同名变量声明。