我要评论一看到这个标题，大家可能首先想到的就是使用“[元素].style.[css属性名] = [属性值]”这样的套路去设置元素样式，但实际上，我们其实还有其他方式可以选择。
接下来，我将详细介绍三种设置元素样式的方式。
一、style
这个其实就是我们所熟知的方式，举个例子~~
<div id="box"></div>
var box = document.getelementbyid("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 = 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()
这个用法相对上面两种方法都较为复杂一些：
[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早日退出历史舞台吧！希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论