javascript如何操作CSS_如何动态修改样式

推荐用 classList 切换预设 CSS 类：提前定义类（如 .btn--loading），再用 add/toggle/remove 安全操作；直接改 style 只影响内联样式且不支持 !important 和响应式；动态样式应使用 insertRule；伪元素样式需通过 CSS 变量或切换类实现。

直接改 element.style 是最常用但有局限的方式

绝大多数场景下，想快速改某个元素的单个样式（比如把文字颜色变红），直接操作 style 属性就行：

const btn = document.getElementById('my-btn');
btn.style.color = 'red';
btn.style.backgroundColor = '#eee';
btn.style.borderRadius = '4px';

注意 CSS 属性名要转成驼峰写法：font-size → fontSize，z-index → zIndex，background-color → backgroundColor。这种写法只影响内联样式，优先级高，但无法覆盖 !important 声明，也不适合批量控制或响应式切换。

用 classList 切换预设 CSS 类更健壮

真正推荐的做法是提前在 CSS 里定义好类，再用 JS 控制增删。这样样式逻辑和行为逻辑分离，可维护性强，也天然支持动画、媒体查询和伪类：

.btn--loading {
  opacity: 0.6;
  pointer-events: none;
}
.btn--success {
  background-color: #4caf50;
  color: white;
}

const btn = document.getElementById('my-btn');
btn.classList.add('btn--loading');
// 或同时增删多个
btn.classList.toggle('btn--success');
btn.classList.remove('btn--loading');

常见陷阱：className 会完全替换整个 class 字符串，容易误删其他类；而 classList 是安全的原子操作。IE10+ 支持，如需兼容 IE9，可用 className.split(' ').includes(...) 手动模拟。

动态插入 CSS 规则要用 insertRule，别用 innerHTML 写

需要运行时生成整套样式（比如主题色切换、暗黑模式适配），应该操作 CSSStyleSheet 对象，而不是拼接字符串塞进 标签：

const style = document.createElement('style');
document.head.appendChild(style);
const sheet = style.sheet;
sheet.insertRule('.theme-dark { background: #121212; color: #fff; }', 0);
sheet.insertRule('.theme-dark button { border-color: #333; }', 1);

优势在于规则可被浏览器正常解析、参与层叠计算，且能通过 sheet.cssRules 查询或删除。用 innerHTML 往 里写内容，在某些浏览器中会导致规则不生效或无法更新。

修改伪元素样式只能靠 CSS 变量或强制重绘

::before、::after 这些伪元素不能直接用 element.style 设置，因为它们不是真实 DOM 节点。可行方案有两个：

• 在 CSS 中预先定义变量，JS 修改根变量值：

  :root {
    --icon-color: #333;
  }
  .my-icon::before {
    color: var(--icon-color);
  }

  document.documentElement.style.setProperty('--icon-color', 'blue');

• 临时切换类触发重绘（较重）：

  .my-icon.highlight::before {
    content: '★';
    color: orange;
  }

  el.classList.add('highlight');

第一种更轻量、可动画，第二种适合简单状态切换。别尝试用 getComputedStyle(el, '::before') 然后反向设置——它只读，且返回值无法用于写入。