HTML怎么用CSS变量_html CSS变量var自定义属性用法【技巧】-html教程-PHP中文网

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

html怎么用css变量_html css变量var自定义属性用法【技巧】

怎么在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规则来桥接。正确做法是：

先在CSS里定义变量（如上）

再在样式中用var()函数引用它，例如：

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

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

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

为什么`var()`有时不生效

常见原因就三个：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

--my-var拼错了，或者大小写不一致（CSS变量区分大小写）
变量定义在某个局部选择器里（比如.modal { --z-index: 1000; }），但你在body下另一个元素里用var(--z-index)——超出作用域，回退到初始值（通常是unset）
没设默认值，而变量未定义，又没提供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语法糖。