JS如何设置元素样式的⽅法⽰例
⼀看到这个标题，⼤家可能⾸先想到的就是使⽤“[元素].style.[CSS属性名] = [属性值]”这样的套路去设置元素样式，但实际上，我们其实还有其他⽅式可以选择。
接下来，我将详细介绍三种设置元素样式的⽅式。
⼀、style
这个其实就是我们所熟知的⽅式，举个例⼦~~
<div id="box"></div>
var box = ElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
显⽰效果：
这种⽅式看似简单粗暴，但写法过于繁冗，尤其是在需要添加很多样式时尤为突出。并且需要注意的是，对于使⽤短划线的CSS属性名，必须将其转换成驼峰⼤⼩写形式。（如⽰例中的backgroundColor）
⼆、style.cssText
这种⽅式相对于上⾯⽅法更为简洁，更像是直接在元素上写CSS：
[元素].style.cssText = [CSS样式];
例如：
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';
确实，写法上很⽅便。
但是，缺点是后⾯同样通过这种⽅式添加的样式会覆盖之前通过style特性指定的样式。
同样还是上⾯的例⼦，只不过是将两段JS写在⼀块：
var box = ElementById("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()
这个⽤法相对上⾯两种⽅法都较为复杂⼀些：好看的css代码
[sheet].insertRule([CSS样式]，指定位置)
[sheet]表⽰某个样式表，它可以通过document.styleSheets来获得。那么，document.styleSheets⼜是什么呢？说得简单⼀点就是应⽤在⽂档中的所有样式表，包括通过link标签引⼊的样式和style标签定义的样式。如果理解上还是有点困难，那么我们还是放个实例吧~~
⾸先头部引⼊样式表：
<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />
当然，这个样式表得真实存在，就算⾥⾯什么样式都不写也没关系。也可以直接⽤style标签，内容为空也不要紧。
然后⽤JS获取这个样式表：
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，那么通过JS添加的这段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上，只希望可恶的IE早⽇退出历史舞台吧！希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。