JavaScript 设置元素样式的三种方式：style、cssText 与 insertRule

JavaScript 设置元素样式的三种方式：style、cssText 与 insertRule

看到标题后，大家可能首先想到的是通过“[元素].style.[CSS属性名] = [属性值]”这种常见套路来设置元素样式，但实际上，JavaScript 提供了其他多种可选方案。

接下来，我将详细介绍三种设置元素样式的具体方式。

直接操作 style 属性

一、style

这是大家最熟悉的方式，以下是一个具体示例：

<div id="box"></div>

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

显示效果如下：

这种方式虽然直观简单，但代码写法较为繁冗，特别是在需要添加大量样式时表现尤为明显。此外，对于使用短横线分隔的 CSS 属性名（如 background-color），必须将其转换为驼峰命名法（例如 backgroundColor）。

使用 style.cssText 批量设置

二、style.cssText

与上述方法相比，这种方式更加简洁，其效果类似于直接在元素上编写 CSS 代码：

[元素].style.cssText = [CSS样式];

例如：

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

从写法上看确实非常便捷。

然而，其缺点在于后续通过此方式添加的样式会覆盖之前通过 style 属性指定的样式。

沿用上面的例子，只不过将两段 JavaScript 代码合并在一起执行：

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

按照层叠样式表的常规特性，前面定义的红色背景色应当保留，但实际上，通过 style.cssText 定义的样式会完全重写 style（包括 style.cssText）之前添加的所有样式。因此，该例子的最终显示结果与仅包含最后一句代码时的效果一致：

最后需要注意兼容性，IE8 及更早版本均不支持 cssText 属性。

通过 insertRule() 修改样式表

三、insertRule()

与前述两种方法相比，此用法的实现相对复杂：

[sheet].insertRule([CSS样式]，指定位置)

[sheet] 代表某个样式表对象，可通过 document.styleSheets 获取。那么，document.styleSheets 又是什么呢？简单来说，它指代应用于文档中的所有样式表，包括通过 link 标签引入的外部样式表和 style 标签定义的内部样式表。如果理解上仍有困难，我们来看一个实例：

首先需要在 HTML 头部引入样式表：

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

当然，该样式表必须真实存在，即使内部没有任何样式规则也无妨。也可以直接使用 style 标签，内容为空同样可以工作。

接着使用 JavaScript 获取该样式表对象：

var sheet = document.styleSheets[0];

最后，我们可以向该样式表中添加新的样式规则：

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

如果在上述所有例子的基础上添加这段代码，显示结果将如下所示：

元素尺寸仍为 200*200，背景颜色变为绿色。这说明通过 style.cssText 设置的宽高样式覆盖了通过 insertRule() 设置的样式。原因很简单，style（包括 style.cssText）方式设置的样式属于行内样式，其优先级自然高于通过 insertRule() 添加的样式。

那么，示例中 insertRule() 的第二个参数 0 具体指代什么呢？

它代表需要添加 CSS 代码在样式表中的位置，因此参数 0 表示将该规则插入到样式表的最开始位置。

例如，我们先手动在样式表中添加一段样式（以下例子与前述例子无关）：

<style>
  #box{ width: 100px; height: 100px;}
</style>

var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

以上代码的执行结果是一个宽高为 100*100 的绿色盒子：

如果将 insertRule() 中的第二个参数改为 1，那么通过 JavaScript 添加的这段 CSS 代码将插入到 #box{ width: 100px; height: 100px;} 之后，类似于以下结构：

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

显示结果：

同样需要注意的是，insertRule() 不兼容 IE8 及更早版本，但可以使用 addRule() 作为替代方案，其语法略有不同，前述例子改写如下：

sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);

第一个参数代表目标元素，第二个参数代表 CSS 样式字符串，第三个参数代表插入位置。前两个参数为必选，最后一个参数可选，若不填写则默认为 0。

结束语：浏览器兼容性问题一直是前端开发者面临的挑战，许多问题主要集中在 IE 浏览器上。希望这些内容能对各位的学习有所帮助，也欢迎大家继续支持本站。