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

内容简介：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。

五、总结

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• WPF从代码后面设置命名样式元素？
• 使用CSS定义页面元素的外观样式
• 「前篇」JavaScript如何获取一个元素的样式信息
• c# – .NET WebBrowser – FireBug样式检查HTML元素
• 微软对 Chromium 新贡献：为 HTML 元素引入更现代化样式
• 1.6 常用CSS样式2：其它样式

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。