看到这个标题，可能首先会想到用“[元素].样式[CSS属性名]=[属性值]”的套路来设置元素样式，但其实我们其实还有其他的选择方式。

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

第一，风格

这其实是我们熟知的方式，比如~ ~

div id=' box '/div var box=document . getelementbyid(' box ')；box . style . width=100px；box . style . height=' 100 px '；box . style . background COlOr=' # f00 '；显示效果：

这个方法看似简单粗暴，但是写起来太繁琐了，尤其是需要添加很多样式的时候。需要注意的是，带有破折号的CSS属性名必须转换成驼峰大小写。(示例中的backgroundColor)

第二，样式

与上面的方法相比，这个方法更简洁，更像是直接在元素上写CSS:

[元素]. style . CSSTYLe=[CSS样式]；

例如：

box . style . CSS text=' width : 200 px；高度： 200 px；border: 1px实心# f00'；的确，写起来很方便。

但是，缺点是以后以这种方式添加的样式将覆盖以前由style属性指定的样式。

上面的例子也是如此，只是两个JS是一起写的：

var box=document . getelementbyid(' box ')；box . style . width=100px；box . style . height=' 100 px '；box . style . background COlOr=' # f00 '；box . style . CSS text=' width : 200 px；高度： 200 px；border: 1px实心# f00'；根据级联样式表的特点，上面定义的红色背景色应该还存在，但实际上，style.cssText定义的样式会重写style添加的所有样式(包括style.cssText)。因此，这个例子的最终结果与上面只有一句话时的结果相同：

最后，注意兼容性。IE8和早期版本都不支持cssText。

第三，插入规则()

这种用法比上面两种方法更复杂：

[工作表]。插入规则([CSS样式]，指定位置)

[sheet]表示样式表，可以通过document.styleSheets获取那么，什么是document.styleSheets呢？简单来说，它指的是文档中应用的所有样式表，包括由链接标签引入的样式和由样式标签定义的样式。如果还是难以理解，那就举个例子吧~ ~

首先，头部介绍样式表：

Link rel='样式表' type=' text/CSS ' href=' CSS/index . CSS ' rel=' externalnofallow '/当然，这个样式表确实存在，即使里面什么都没有写。也可以直接使用样式标签，内容为空也没关系。

然后使用JS获得这个样式表：

var sheet=document . style sheets[0]；最后，我们可以向这个样式表添加样式：

sheet . insert rule(' # box { width : 300 px；height: 300px背景-color : # 0f 0；}',0);如果在以上所有示例的基础上添加此代码，显示结果将如下所示：

大小仍然是200*200，背景颜色是绿色，这意味着由style.cssText设置的宽度和高度样式会覆盖由insertRule()设置的样式。原因很简单。样式设置的样式(包括style.cssText)属于内嵌样式，自然比insertRule () ~ ~

那么，示例中insertRule()的第二个参数0是什么意思呢？

它指的是我们需要添加CSS代码的位置，所以参数0代表样式表的起始位置。

例如，让我们首先手动向样式表添加一个样式(以下示例与上面的示例无关):

样式# box { width: 100px高度： 100像素；}/style var sheet=document . style sheets[0]；sheet . insert rule(' # box { width : 300 px；height: 300px背景-color : # 0f 0；}',0);上述实现的结果是一个宽度和高度为100*100的绿色方框：

如果将insertRule()中的第二个参数改为1，则通过JS添加的CSS代码相当于被添加到# box { width: 100px高度： 100像素；}，类似于以下内容：

样式# box { width: 100px高度： 100像素；} # box { width: 300pxheight: 300px背景-color : # 0f 0；}/style显示结果：

还需要注意的是，insertRule()与IE8及更早版本不兼容，但可以用语法略有不同的addRule()来代替。上面的例子如下：

复制代码如下：页。AddRule ('# box '，' width : 300pxheight: 300px背景-color : # 0f 0；',0);

第一个参数表示元素，第二个参数表示CSS样式，第三个参数表示插入位置。前两个参数是必需的，最后一个是可选的。如果未填充，默认值为0。

结论：浏览器兼容性一直是前端开发者头疼的问题，很多问题主要集中在IE上。只是希望可恶的IE早日退出历史舞台。希望对大家的学习有帮助，希望大家多多支持我们。