如何使用javascript修改CSS样式_有哪些方法？

直接操作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');

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

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

标签： css javascript java html js 浏览器 app ssl ai css样式 red