17370845950

JavaScript通过style属性、classList和getComputedStyle等API动态控制CSS样式：直接修改element.style适用于简单内联样式；推荐用classList切换预定义CSS类；getComputedStyle用于读取最终渲染样式。

JavaScript 通过操作 DOM 元素的 style 属性或 className/classList，就能直接控制 CSS 表现，实现动态样式切换。

直接修改内联样式（element.style）

这是最直观的方式，适用于单次、简单、需要即时生效的样式调整。注意：只能设置内联样式，且属性名使用驼峰写法（如 backgroundColor 而非 background-color）。

• element.style.color = 'red';
• element.style.fontSize = '16px';
• element.style.display = element.style.display === 'none' ? 'block' : 'none';

⚠️ 注意：style 只读取/写入内联样式，无法获取 CSS 文件或 中定义的值；若想读取计算后样式，需用 getComputedStyle(element)。

切换 CSS 类（className 或更推荐 classList）

把样式逻辑交给 CSS 类，JS 只负责“开关”，更清晰、可维护、支持过渡动画，是推荐做法。

• element.className = 'active';（覆盖全部类名，慎用）
• element.classList.add('highlight');
• element.classList.remove('disabled');
• element.classList.toggle('collapsed');
• element.classList.contains('error');（用于条件判断）

✅ 示例：按钮点击切换主题色
btn.classList.toggle('dark-mode'); 配合 CSS 中 .dark-mode { background: #333; color: white; } 即可生效。

动态插入或修改样式表（ 标签）

适合运行时生成大量样式规则，比如主题配色、响应式断点注入、UI 组件库的样式隔离等。

• 创建 标签并追加到
• 用 document.styleSheets[0].insertRule(...) 向现有样式表插入规则
• 修改 style.textContent 替换整块样式

⚠️ 注意：insertRule 在某些浏览器中对跨域样式表有限制；动态样式建议加唯一标识（如 data- 属性），便于后续清理。

读取真实渲染样式（getComputedStyle）

当需要获取元素最终生效的样式（含继承、层叠、媒体查询匹配结果）时，必须用它，而不是 element.style。

• const computed = getComputedStyle(element);
• console.log(computed.width); // 返回 '200px'
• console.log(computed.getPropertyValue('margin-top')); // 支持短横线写法

? 提示：返回的是只读的 CSSStyleDeclaration 对象，不能直接赋值；常用于动画起始值获取、尺寸计算、暗色模式检测等场景。