HTML如何用CSS变量_html CSS变量var自定义属性用法【技巧】

HTML如何用CSS变量_html CSS变量var自定义属性用法【技巧】的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

CSS变量须在CSS规则中用:root或选择器定义，如:root { --main-color: #3498db; }；HTML中通过class应用含var()的样式，不可在style属性直接写var()；JS通过getComputedStyle和setProperty读写。

怎么在HTML里定义CSS变量

CSS变量（也叫自定义属性）必须写在CSS规则里，不能直接写在HTML的style属性中——这是新手最容易卡住的地方。你得用:root或某个选择器来声明，比如：

:root {  --main-color: #3498db;  --spacing-md: 16px;}

这里:root等价于html元素，作用域覆盖整个文档。如果只想让变量在某个组件内生效，也可以写成.card { --card-padding: 12px; }，但注意：子元素要显式继承或重新读取，不会自动“穿透”。

怎么在HTML元素上用CSS变量

不是用style="color: var(--main-color)"这种写法——那是错的。HTML标签本身不解析var()，必须靠CSS规则来桥接。正确做法是：

1. 先在CSS里定义变量（如上）
2. 再在样式中用var()函数引用它，例如：

   .btn {  background-color: var(--main-color);  padding: var(--spacing-md);}

3. 然后在HTML里照常使用这个类：<button class="btn">点击</button>

如果你试图在style属性里直接写var(--x)，浏览器会忽略它，因为内联样式不支持运行时计算（除非你用JS动态设置）。

为什么var()有时不生效

常见原因就三个：

1. --my-var拼错了，或者大小写不一致（CSS变量区分大小写）
2. 变量定义在某个局部选择器里（比如.modal { --z-index: 1000; }），但你在body下另一个元素里用var(--z-index)——超出作用域，回退到初始值（通常是unset）
3. 没设默认值，而变量未定义，又没提供fallback，比如color: var(--text-color, #333);漏了, #333，一旦--text-color不存在，整条声明就无效

调试时可以用浏览器开发者工具的“Computed”面板看最终计算出的值，也能看到哪些var()被标记为“invalid”。

怎么用JS读写CSS变量

这是真正把HTML和CSS变量联动起来的关键。JS不能直接操作--xxx，得通过getComputedStyle或style.setProperty：

const root = document.documentElement;// 读const color = getComputedStyle(root).getPropertyValue('--main-color').trim();// 写root.style.setProperty('--main-color', '#e74c3c');

注意：getPropertyValue返回带空格的字符串，要用trim()；setProperty只影响当前节点及其后代，对:root调用就是全局改。

别指望用dataset或getAttribute去抓--xxx，它们根本不是HTML属性，只是CSS语法糖。