JS设置CSS样式的方法汇总：从style属性到insertRule

直接修改 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 样式的多种常用方式。每种方法各有优劣，开发者应根据具体需求、浏览器兼容性以及代码维护性选择合适的方案。如有任何疑问，欢迎交流探讨。

JavaScript 操作 CSS 样式的八种常用方法详解