JavaScript 操作 CSS 样式的八种常用方法详解
本文汇总了JavaScript中设置CSS样式的八种主要方式，包括直接修改style属性、使用setAttribute、setProperty方法、改变class名、操作cssText、动态创建style标签以及通过addRule和insertRule修改样式表。文章详细解析了各方法的适用场景、语法差异及!important优先级的处理技巧，帮助开发者根据实际需求选择最优方案。
直接修改 Style 属性与命名规范
第一种方式是通过直接修改元素的 style 对象属性来应用样式。这种方式最为直观，例如设置元素高度。需要注意的是，在某些特定情况下，通过这种方式设置的 !important 优先级可能无法生效或存在兼容性问题。
当 CSS 属性名称中包含连字符（如 text-align）时，JavaScript 中需将其转换为驼峰命名法（如 textAlign）。若希望保留连字符，则必须使用方括号语法进行赋值，例如 element.style['text-align'] = '100px';。
element.style.height = '100px';使用 setAttribute 设置样式
第二种方式是利用 setAttribute 方法直接设置 HTML 属性。这种方法仅适用于部分能够自动映射到样式的属性，浏览器会自动识别并应用相应的样式效果。
element.setAttribute('height', 100);
element.setAttribute('height', '100px');第三种方式是通过 setAttribute 方法直接操作 style 属性字符串。这种方式允许在字符串中直接定义样式规则，包括使用 !important 声明，从而覆盖其他样式的优先级。
element.setAttribute('style', 'height: 100px !important');!important 是 CSS 定义中拥有最高优先级的声明，用于强制覆盖其他样式的设置。
setProperty 处理 !important 优先级
第四种方式推荐使用 style.setProperty 方法。当需要设置带有 !important 优先级的样式时，此方法通过传递第三个参数为 'important' 来实现，是处理高优先级样式的推荐做法。
element.style.setProperty('height', '300px', 'important');改变 Class 与操作 cssText
第五种方式是通过改变元素的 class 属性来应用样式。这通常涉及直接修改 className 字符串，或者借助 jQuery 等库提供的更改 class 相关方法，通过切换类名来应用预设的 CSS 规则。
element.className = 'blue';
element.className += 'blue fb';第六种方式是直接操作 cssText 属性。通过赋值或追加字符串，可以直接覆盖或扩展元素的行内样式，同样支持 !important 的使用，但需注意对原有样式的覆盖风险。
element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';动态创建 Style 标签
第七种方式是动态创建并引入新的 CSS 样式文件。通过 JavaScript 动态生成 <style> 标签，定义样式规则，并将其插入到文档的 <head> 部分，从而实现样式的批量添加或动态加载。
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('.box {height: 100px !important;}');使用 addRule 和 insertRule 修改样式表
第八种方式是利用样式表 API，即 addRule 和 insertRule 方法。这两种方法允许在现有的样式表或新创建的样式表中插入具体的 CSS 规则，适用于需要精确控制样式表结构的场景。
// 在原有样式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);
// 或者插入新样式时操作
var styleEl = document.createElement('style'),
styleSheet = styleEl.sheet;
styleSheet.addRule('.box', 'height: 100px');
styleSheet.insertRule('.box {height: 100px}', 0);
document.head.appendChild(styleEl); 以上介绍了 JavaScript 设置 CSS 样式的多种常用方式。每种方法各有优劣，开发者应根据具体需求、浏览器兼容性以及代码维护性选择合适的方案。如有任何疑问，欢迎交流探讨。
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40