直接操作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 对象。
立即学习“Java免费学习笔记（深入）”；
向页面追加一个 标签：
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'），且是只读对象，无法直接修改 常用于动画起止值计算、响应式逻辑判断等场景
基本上就这些。选哪种方法取决于你要改的是单个元素还是全局规则、是否需要复用、要不要动画支持——不复杂但容易忽略细节。
以上就是如何使用javascript修改CSS样式_有哪些方法？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542581.html
微信扫一扫 
支付宝扫一扫 
