JS的平凡之路--我们到底可以通过多少种方式修改元素样式

本篇文章主要介绍JS操作CSS的各种方法。

一、前言

  一般我们在项目中引入CSS样式，可以通过link标签引入外部样式表，也可以通过style标签引入样式，最后可以直接在元素的行内设置style属性值，不过这里有一点要注意：

• style和link多有一个media属性，默认是screen值，我们可以这样赋值：media="screen and (max-width: 1000px)";当屏幕的宽度小于1000像素时，此段样式生效。
• media常见的属性还有print,只有在打印或者打印预览的时候样式才会生效。

  下面我们来聊聊用JS有多少种方式来修改一个元素的样式。

二、style属性

    const demo = document.querySelector('.demo');
    demo.style.width = "400px";
    demo.style.background = "yellow";
复制代码

  当你采用这种方式修改元素的样式时，如果原先设置的css样式没有用!important修饰的话，它的优先级是最高的，这段样式将插入到元素的style属性中:

    <div class="demo" style="width: 400px; background: yellow;"></div>
复制代码

  如果你对性能敏感的话，这样多次的操作，显然不是一个很好的习惯。所以这里又来了个cssText:

    demo.style.cssText = "background: blue;";
复制代码

  当我们使用cssText时，如果我们直接赋值的话，会覆盖掉之前在style属性里面的值，所以这里我们可以这样：

    demo.style.cssText += "background: blue;";
复制代码

  采用cssText减少了频繁的赋值操作。

三、class属性

  我们多知道元素的class属性也是影响元素样式的要素之一，所以这里我们想到了这种方法修改样式:

    demo.setAttribute('class','demo1');
复制代码

  这样的确是个方法，但是同样会覆盖原先的类名，这里我们需要这样处理一下：

    const attr = demo.getAttribute('class');
    demo.setAttribute('class',attr + ' demo1');
复制代码

  这里一定要注意，类名之间要用空格分开。

  这里我们也是费了一番周折修改了class属性，实际上在标准已经为什么我们添加了className的快捷属性。

    demo.className += " demo1";
复制代码

  这里我们同样要用空格分隔类名，仔细思考这两种方法弊端还是不少：

• 需要采用空格分隔类名；
• 可能会添加重复的类名；
• 各种不舒服。。。。。。。

  这里就要引出我们的classList:

• add(classname): 添加类名；
• remove(classname): 删除类名；
• item(n): 得到列表中的第n个类名；
• toggle(classname): 如果类名存在则删除，否则添加；
• contains(classname): 判断类名是不是存在。

  这么多快捷的方法，是不是很爽，自己玩去吧，我就不一一介绍了。通过类名更改元素样式必须要了解类名的CSS优先级，不然你就算添加一堆类名也没有什么用处。

四、style标签

  元素的style属性，class属性我们多动刀了，那么我们还剩下什么？修改link标签的href属性值，这未必有点太牵强了。那我们来修改style标签吧。

  我们可以通过哪些方式获取style标签的内容呢?

1、通过元素属性获取

  我们可以给style标签加上一个id:

    <style id="demostyle">
        .demo {
            width: 200px;
            height: 100px;
            background: red;
        }
    </style>
复制代码

  然后我们就可以通过innerHTML、outerHTML和innerText获取style标签内容了。这里我就采用innerText了：

    document.getElementById('demostyle').innerText = ".demo {width: 1000px; height: 200px;background: yellow;}";
复制代码

  这里我只是简单的赋值，如果你要处理的很好的话，得用正则去处理这些字符串，才能达到更好的效果。

2、通过document.styleSheets

  除了上面这种方式获取style标签，我们还可以通过document.styleSheets,这个就要解决我们上面用innerText带来的各种不方便，它有两个方法:

• deleteRule(n): 删除第n条cssRule；
• insertRule(rule, n): 在第n处插入一条cssRule。

  对于上面的style标签，我们可以这样操作：

    const style = document.styleSheets[0];
    style.insertRule('div.demo {background: blue}',1);
复制代码

  这里我们更要考虑CSS的优先级问题，虽然我们向style中添加了一条cssRule，但是style中并不会显示这条cssRule。我们只能通过document.styleSheets[0]来查看新增的cssRule。

五、总结

  折腾了半天，终于告一段落。二和三的方法主要运用于单个元素的样式修改，而四应该可以用来修改一些公共样式。

参考资料来源于MDN文档

---

  喜欢本文的小伙伴们,欢迎关注我的订阅号超爱敲代码,查看更多内容.