js修改css样式,js怎么修改样式 收藏 0

总结：js中4类修改样式的方法

最近在写一个扩展右键菜单的插件，既然是插件，想着一步到位，把相关的style样式设置都丢进js文件中，直接加载一个js文件便可以使用该插件，所以今天就研究了下js批量的插入样式的方法，即addSheet，顺便总结下Javascript中修改样式的4类方法

直接贴代码更为方便，这是addCssRule方法，可以一条一条规则的添加到样式表中

该方法的思路就是，通过创建style，并把style添加到head上，然后返回style的sheet对象，利用sheet对象的insertRule(主流)，或者addRule(ie8以下)方法，把样式添加到新建的样式表中。当然，此方法也可以改写成添加到已有的样式表中，而无须另行的创建新的样式表。

上面的方法是手动的每条规则添加一次，而我目前的需求是批量的添加样式，所以需要另寻它法。

下面的这个是addSheet方法

使用实例

addSheet方法可以批量的插入大量的样式，但是目前的缺点是，由于换行造成了不足，需要手动的在后面加上\\解决，所以在实际开发中如果想使用该方法，可以通过网上的工具，把样式进行空格压缩之后作为参数传进来。目前打算是自己写一个node程序撸掉它。

这个方法应该是我们最为熟悉的了，介绍不多

（注意）

在使用该方法时，注意两点，cssText属性会覆盖原来的行内样式，即

在使用了

之后，原本的样式会被覆盖，变成

所以，一般我们为了避免行内样式被覆盖，都会这样使用

这样原本的行内样式就不会被覆盖

但是，在ie8之下，却存在一个奇葩的问题

输出结果是这样的，如果足够细心你会发现，此处的;被剔除了，所以一旦在ie8以下这样使用cssText则会由于分号的原因出现问题

所以为了在ie8以下正常使用需要写个方法加上分号，具体方法这里不写了，后面的参考博客会给出

总共有4类方法修改样式，其他小的不计在这里，最后的一个方法就是通过修改元素的className来实现，这里也给出几个与class相关的参考方法

getClass方法

hasClass方法

addClass方法

removeClass方法

剩下的这个replaceClass方法懒得写了

上述的代码片段都是看了其他大牛博主，然后自己偷懒少写了一部分功能实现的，所以如果想要在实际开发中使用上面的方法请看下面的参考链接拿到源码，毕竟我上面的那些都是为了测试而写的，不完整。

参考链接

JavaScript三种动态改变样式属性

JavaScript三种动态改变样式属性

在JavaScript中，有两种方式可以动态地改变样式的属性，一种是使用样式的style属性，另一种是使用样式的className属性。另外，控制元素的显示和隐藏使用display属性。

1.style 属性

设置style属性语法：

HTML元素.style.样式属性=\”值”；

在JavaScript中使用CSS样式与在HTML中使用CSS稍有不同，由于在JavaScript中“-”表示减号，因此如果样式属性名称中带有“-”号，要省去“-”，并且“-”后的首字母要大写。例如，在页面中有一个id为titles的div，要改变div中的字体颜色为红色，字体大小为25px，代码如下所示:

document.getElementById(\”titles\”).style.color=\”#ff0000\”;

document.getElementById(\”titles\”).style.fontsize=\”25px\”;

2.className属性

在HTML DOM中，className属性可设置或返回元素的class样式。

设置 className属性语法：

HTML元素，className=”样式名称”；

将上述示例中div中的字体样式写在样式表中，使用className属性来控制，代码如下所示。

.divStyle{color:#ff0000;font-size:25px;}

document.getElementById(\”titles\”).className=\”divStyle\”;

关于这两种方式的具体使用，请参考《QlavaScript制作页面特效》的相关视频。

3.display属性

display属性控制元素的显示和隐藏，取值有none（隐藏）和block（显示）。

设置 display属性语法：

HTML元素.display=\”值”；

到这里，任务8中的Tab切换效果就可以轻松完成了，自己动手试试吧。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com