内容简介：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文档
觉得不错的同学，来一波关注吧，您的关注就是我写作的动力。
GitHub交流以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- WPF从代码后面设置命名样式元素？
- 使用CSS定义页面元素的外观样式
- 「前篇」JavaScript如何获取一个元素的样式信息
- c# – .NET WebBrowser – FireBug样式检查HTML元素
- 微软对 Chromium 新贡献：为 HTML 元素引入更现代化样式
- 1.6 常用CSS样式2：其它样式
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
