JavaScript CSS修改学习第三章：修改样式表

核心提示： 没有关键字所以如果使用索引值的话问题就非常严重，我们希望能这样访问：document.styleSheets[1].cssRules['PRE.test']这样我就能访问pre的样式表规则了，JavaScript CSS修改学习第三章：修改样式表(3)，但是W3C或者其他浏览器貌

没有关键字

所以如果使用索引值的话问题就非常严重。我们希望能这样访问：

document.styleSheets[1].cssRules['PRE.test']

这样我就能访问pre的样式表规则了。但是W3C或者其他浏览器貌似不需要这样的访问样式表的方法。但是所有的文档在这个问题上都保持沉默。

这个失败意味着你基本上没法访问规则了。

样式声明

假设我们已经访问了一条规则。现在需要改变其中一条声明。表达式如下：

1　rule.style.color　=　'#0000cc';

W3C的方法是：

1　rule.style.setProperty('color','#00cc00',null);

因为style.color简单的多，所以我不想用这个seProperty()。

例子

打算改变pre的颜色，代码如下：

为了保证能用，我把pre的规则写在最后一条。很丑，但是这是唯一的办法：

01　function　changeIt()　{
02　　　　　if　(!document.styleSheets)　return;
03　　　　　var　theRules　=　new　Array();
04　　　　　if　(document.styleSheets[1].cssRules)
05　　　　　　　　　theRules　=　document.styleSheets[1].cssRules
06　　　　　else　if　(document.styleSheets[1].rules)
07　　　　　　　　　theRules　=　document.styleSheets[1].rules
08　　　　　else　return;
09　　　　　theRules[theRules.length-1].style.backgroundColor　=　'#EEF0F5';
10　}

翻译地址：http://www.quirksmode.org/dom/changess.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章

• JavaScript CSS修改学习第五章：给“上传”添加样式
• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表