17370845950

直接操作style属性适合动态设置少量样式；切换className或classList更易维护且支持动画；动态插入CSS规则适用于主题切换等场景；getComputedStyle用于读取最终计算样式。

直接操作元素的 style 属性是最常用、最直观的方式，适合动态设置单个或少量样式；更灵活的场景则推荐用 className 切换预定义 CSS 类，或通过 CSSOM API（如 insertRule）动态增删样式规则。

修改元素内联样式（style 属性）

每个 DOM 元素都有 style 属性，对应其 HTML 中的 style 特性。它是一个 CSSStyleDeclaration 对象，属性名采用驼峰写法（如 backgroundColor 而非 background-color）。

• 设置单个样式：element.style.color = 'red';
• 设置带单位的值：element.style.width = '200px';（注意：数字值不会自动加 px）
• 移除某个样式：element.style.removeProperty('opacity');
• 批量设置（可封装为函数）：Object.assign(element.style, { opacity: 0.8, transform: 'scale(1.2)' });

切换 CSS 类名（className 或 classList）

比起逐个改 style，预先在 CSS 中定义好类（如 .highlight、.disabled），再用 JS 控制类的增删，更易维护、支持过渡动画、且不影响其他内联样式。

• 替换全部类名：element.className = 'btn btn-primary active';
• 推荐使用 classList（更安全）：element.classList.add('active');、element.classList.remove('disabled');、element.classList.toggle('hidden');
• 检查是否存在某类：element.classList.contains('error');
• 一次操作多个类：element.classList.add('a', 'b'); element.classList.remove('c', 'd');

动态插入或修改全局样式规则

当需要运行时生成整套样式（比如主题色切换、根据屏幕尺寸注入媒体查询），可操作 标签或 CSSStyleSheet 对象。

• 向页面追加一个 标签：
  

  const style = document.createElement('style');
  style.textContent = '.theme-dark { background: #111; color: #fff; }';
  document.head.appendChild(style);

• 向现有样式表插入规则（兼容性注意）：
  

  const sheet = document.styleSheets[0];
  sheet.insertRule('.new-rule { display: none; }', sheet.cssRules.length);

• 修改已有规则（需知道索引）：
  sheet.cssRules[0].style.backgroundColor = '#eee';

使用 getComputedStyle 读取最终计算样式

修改样式后，若需获取浏览器实际应用的值（含继承、层叠、媒体查询生效后的结果），不能依赖 element.style.xxx（它只返回内联样式），而要用 getComputedStyle。

• const computed = getComputedStyle(element);
• 读取值：computed.fontSize、computed.getPropertyValue('margin-top')
• 注意：返回的是字符串（如 '16px'），且是只读对象，无法直接修改
• 常用于动画起止值计算、响应式逻辑判断等场景

基本上就这些。选哪种方法取决于你要改的是单个元素还是全局规则、是否需要复用、要不要动画支持——不复杂但容易忽略细节。