1. 核心概念与动机
1.1 HTMLElement.style 与 CSS 自定义属性的关系
在前端开发中，HTMLElement.style 提供对元素行内样式的直接访问，意味着你可以在运行时对单个元素的内联样式进行动态修改，但它只反映已明确写入的内联样式，不包含来自外部样式表、嵌入样式或浏览器默认样式的规则。理解这一点有助于避免把内联样式和外部样式混淆，从而提高样式控制的确定性。
另一方面，CSS 自定义属性（变量）提供了一种在文档树中跨组件复用样式的机制。它们可以在根节点或某个元素上定义，随后通过 var(--name) 被样式规则读取，便于实现主题切换、响应式设计以及配置化的样式传参。
// 将一个 CSS 自定义属性设为内联样式变量，并在后续样式中使用它
const el = document.querySelector('.demo');
el.style.setProperty('--theme-color', '#4caf50');
el.style.color = 'var(--theme-color)';
为了让两者协同工作，可以在运行时通过 style.setProperty 修改自定义属性的值，从而驱动 CSS 中变量所绑定的样式。这样的组合在复杂应用中尤为有用，因为它既保留了 CSS 的声明性，又保留了 JavaScript 的动态能力。
需要注意的是，若仅凭 HTMLElement.style 来读取某个样式值，往往得到的是内联样式的字符串，而非最终渲染的值。此时应结合 getComputedStyle 来获取计算后的属性值，以便准确反映页面实际呈现效果。
const el = document.querySelector('.demo');
const inlineColor = el.style.color; // 可能是 "rgb(0, 0, 0)" 或 ""
const computedColor = getComputedStyle(el).getPropertyValue('color'); // 实际呈现的颜色
2. CSS 自定义属性的核⼼机制与实践
2.1 定义、继承与作用域
CSS 自定义属性可以在文档中的任意位置定义，常见做法是在 :root 下定义以实现全局默认值。它们具备继承性，子元素在未覆盖的情况下会继承父元素的变量值，从而实现跨组件的一致性。
变量的作用域由定义位置决定。若在某个组件的根元素上定义变量，只有该子树的子元素会继承并覆盖它。为了实现全局主题，往往在 :root 下定义通用变量，并在具体组件中通过 var(--变量名) 使用它们。
:root {--primary-color: #1e90ff;--radius: 6px;
}
.button {background: var(--primary-color);border-radius: var(--radius);
}
在 JavaScript 中读取变量值时，应该通过 getComputedStyle，而不是直接访问元素的 style 属性。只有通过计算样式拿到的值，才能反映实际渲染效果。
const el = document.querySelector('.option');
const rootColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
const localColor = getComputedStyle(el).getPropertyValue('--primary-color').trim();
如果需要在运行时覆盖变量值，可以通过对目标元素使用 style.setProperty，或者在相应的样式规则中通过变量传递主题信息，从而实现灵活的主题切换。
const box = document.querySelector('.themed');
box.style.setProperty('--primary-color', '#e91e63');
3. 避开短属性展开的陷阱
3.1 为什么短属性展开会带来副作用
所谓的短属性，指的是 CSS 的简写属性如 padding、margin、border 等。它们在被写入内联样式时，会在浏览器内部展开为长手属性，例如 padding-top、padding-right、padding-bottom、padding-left。因此，直接通过 style 对象读取某些属性时，往往得到不完整或空字符串，无法准确反映实际使用值。
如果依赖内联简写属性来判断布局或状态，容易出现错觉：你以为某个长手属性已经被设置，实际并非如此，或者值在外部样式表中被覆盖却仍显式写在内联上。这个陷阱会引发维护难题，尤其是在主题切换和响应式设计中。
const el = document.querySelector('.trap');
console.log('inline padding:', el.style.padding); // 可能是 ""，即没有写入内联简写值
console.log('computed padding-top:', getComputedStyle(el).getPropertyValue('padding-top'));
一个常见的错误场景是仅通过 element.style.padding 来判断布局状态，结果往往与实际呈现不符，因为外部样式表或媒体查询也可能影响最终效果。
/* 通过变量控制布局时，避免直接依赖内联简写属性 */
:root { --gutter: 12px; }
.section { padding: var(--gutter); }
正确的做法是将可变参数集中在 CSS 变量上，通过计算样式或变量驱动行为，而不是盲目修改内联简写属性。这样可以降低来自多源样式的干扰，提高可维护性。
3.2 实践技巧：统一管理变量避免多源干扰
在实际项目中，推荐将可变参数统一放在 CSS 变量上，并使用 inline style 局部覆盖变量来实现主题或布局微调，而非频繁直接修改简写属性。这样可以确保不同来源的样式在渲染阶段保持一致。
通过这种方式，前端团队可以在设计层面提前定义好主题参数，并在运行时仅通过覆盖变量来实现视觉变化，减少对具体长手属性的依赖，从而提升可维护性和可预测性。
// 局部覆盖全局变量，避免直接操作多处的简写属性
const el = document.querySelector('.demo');
el.style.setProperty('--gutter', '20px');
3.3 跨浏览器一致性与回退
考虑到部分旧版浏览器对简写属性的处理差异，使用 getComputedStyle 获取计算后的值，以及通过 CSS 变量的回退机制，可以提升跨浏览器的一致性。尽量避免在逻辑中直接依赖内联简写属性的读值。
const gutter = getComputedStyle(document.documentElement).getPropertyValue('--gutter').trim() || '16px';
