js修改css样式的几种方法

青旅半醒 2022-04-22 04:28 254阅读 0赞

参考：[https://www.cnblogs.com/LiuWeiLong/p/6058059.html][https_www.cnblogs.com_LiuWeiLong_p_6058059.html]

**1. 直接设置style的属性**  element.style.属性 = 值

某些情况用这个设置 !important值无效。如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 - 号，就中括号的形式  element.style\['text-align'\] = '100px';

element.style.height = '100px'; //只会改变height的值，与方法2、3区分下
    element..style.borderRight = "1px solid #ff0000"; //border-right

**2. 设置cssText**

document.getElementById("test").style.cssText = 'background:blue;height:100px;';

**3. 使用方法setAtrribute  ***element*.setAttribute(*attributename*,*attributevalue*)

只能用于某些属性(如height、width等标签下自有的属性)，这些样式会自动识别

这个方法也可以用来修改标签的其他属性，如input标签的type,value等

document.getElementById("div").setAttribute('height', 100);
    document.getElementById("div").setAttribute("style","display:none;height:100px;");//会把style的内容全部改变

**4. 使用setProperty**  如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

**5. 改变class**   比如JQ的更改class相关方法

因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
    element.className += 'blue fb';

**6. 创建引入新的css样式文件**

**7. 使用addRule、insertRule**

// 在原有样式操作
    document.styleSheets[0].addRule('.box', 'height: 100px');
    document.styleSheets[0].insertRule('.box {height: 100px}', 0);
    
    // 或者插入新样式时操作
    var styleEl = document.createElement('style'),
    var styleSheet = styleEl.sheet;
    
    styleSheet.addRule('.box', 'height: 100px');
    styleSheet.insertRule('.box {height: 100px}', 0);
    
    document.head.appendChild(styleEl);

[https_www.cnblogs.com_LiuWeiLong_p_6058059.html]: https://www.cnblogs.com/LiuWeiLong/p/6058059.html