JavaScript 操作样式表(StyleSheet)
JavaScript对单个元素样式的操作很简单,只要操作元素上的style属性就可以了。但是有时候仅操作单个元素的样式无法达到我们需要的效果。当需要批量修改一大堆元素的样式时如果遍历修改就很浪费资源,这时候就可以直接操作样式表来实现批量修改样式。
样式表实际上也是一个DOM节点,一般分为两种,一种是使用LINK标签引入的外部样式表文件,另一种是直接在文档中使用STYLE标签储存的样式表数据。它们必须存在与文档中才会生效,比如下面的代码我把样式表的标签删除了之后,它设置的样式也会失效。 ~~~ 样式表也是一个dom节点,删除样式表节点 样式则失效<style id="s1">
div {color:blue;}
</style>
<style id="s2">
div {font-size:64px;}
</style>
<div>www.web-tinker.com</div>
<script>
//删除s2这个样式表元素
var s2=document.getElementById("s2");
s2.parentNode.removeChild(s2);
</script>
s2这个STYLE元素被删除了,它设置的字体大小就失效了;而s1没有被删除,它设置的颜色可以生效。这里测试的是STYLE标签,LINK标签的删除也会让LINK引用的样式表文件失效,这里就不测试了。
无论是STYLE标签设置的样式表还是LINK标签引用的外部样式表文件,当它们生效时候我们都可以在document.styleSheets中访 问它们。这个对象是一个拟数组,里面包含了当前文档中的所有样式表。可以根据下标来获取某个样式表对象(CSSStyleSheet)。样式表对象的具体 文档可以参考MDN上的(文章末尾有链接)。 ~~~document.styleSheets 样式表节点列表
从这个样式表对象开始,后面的部分就存在巨大的浏览器差异了,先来看看IE8-的情况。我们可以访问样式表上rules这个属性来访问这个样式表中的 每一个CSS规则对象。但是,在IE8-上通过rules访问到的CSS规则对象我们只能修改它的样式,而无法修改选择器(CSS规则是由样式和选择器组 成的)。我们来看个测试代码<style>
div {color:red;}
</style>
<div>www.web-tinker.com</div>
<script>
var s,r;
s=document.styleSheets[0]; // ~~~ styleSheets[0].rules 样式规则集合对象 IE8-, rule.style.color = 'blue';
r=s.rules[0];
r.style.color="blue"; //这句可以生效
r.selectorText="body"; //这句会错误
</script>
修改样式的语句确实生效了,但是修改选择器的则错误。另外,IE8-下我们还无法单独插入或删除一条规则。但是可以直接操作整个样式表的CSS文本,通过从样式表的cssText属性来操作。下面是测试代码,这个测试就不截图了,只是把字体变成了蓝色而已。 ~~~stylesheet.cssText = 'body{color:pink;}'; 改写整个样式表<style>
总的来说,IE8-下的样式表对象对操作单个CSS规则我们能做的只有修改它的样式而已,功能很弱。不过修改整个样式表的CSS文本就很容易。如果实 际项目中真有这样的需求,我们就可以换一下思维。把需要经常操作的样式单独存放的一个样式表中,这样就可以方便的操作了。
table {color:red;}
</style>
<div>www.web-tinker.com</div>
<script>
var s;
s=document.styleSheets[0];
s.cssText="div {color:blue;}";
</script>
接着是IE9+和现代浏览器的版本,或者说W3C标准。这个版本中样式表是通过cssRules这个属性来访问里面规则的。样式表对象还提供了 insertRule和deleteRulell来插入或删除规则,这使得对样式表的规则更丰富。我们只要知道规则在这个样式表中的序号就可以删除它。插 入规则时也需要带序号,因为CSS规则的优先级是和顺序有关的。下面就写个简单的例子吧。 <style> ~~~ie9+ 现代浏览器 通过cssRules更改样式规则 样式规则的删除 插入
div {color:red;}
div {font-size:32px;}
</style>
<div>www.web-tinker.com</div>
<script>
var s;
s=document.styleSheets[0];
//删除第二条样式,注意下标从0开始
s.deleteRule(1);
//在所有样式之前插入一条
s.insertRule("div {color:green;}",0);
//在所有样式之后插入一条
s.insertRule("div {color:blue;}",s.cssRules.length);
</script>
删除样式的方法参数就是一个下标而已,没啥好说的。而插入样式时第二个参数是需要插入的样式插入后的位置,或者说,是在目标位置的上方插入的(貌似所有的insert都是上方插入的)。如果还觉得不明白自己修改改例子中的参数试试就知道。
虽然这个标准的样式表对规则的插入删除很容易操作,但是要操作整个样式表的所有样式字符串就没那么容易了。如果真要操作,需要通过样式表所在的DOM 节点来找出相应的STYLE元素,操作元素的textContent来修改整个样式表的字符串。而且使用LINK引入的样式表文件就无法操作了。下面是例 子,测试结果和上一个测试一样的,我就不截图了。<style>
这个标准还有一个特点,还记得IE8-上CSS规则对象只能修改属性而不能修改选择器吗?这个标准的对象就可以修改选择器。下面是测试代码。
table {color:red;}
</style>
<div>www.web-tinker.com</div>
<script>
var s;
s=document.styleSheets[0];
s.ownerNode.textContent="div {color:blue}";
</script><style>
这个运行结果用大拇指猜都能猜到,和上一个测试的结果一样,文字变成蓝色的,我就不截图了。
table {color:blue;}
</style>
<div>www.web-tinker.com</div>
<script>
var s;
s=document.styleSheets[0];
//把原来table的选择器改为div的
s.cssRules[0].selectorText="div";
</script>
好了,到这里就把JavaScript对样式表的基本操作都整理了一遍,貌似内容很多了。不过这也只是皮毛,因为CSS3中有些东西已经脱离了选择器 本身的概念,CSS规则变得未必是由一个选择器和一个样式构成的,所以处理起来会更复杂。后面的东西我也懒的研究了,反正目前对CSS3的奇葩需求也不 高,等到以后真遇到问题了再再来研究吧~