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

核心提示：请注意代码和传统的DHTML的区别，在DHTML你通过直接修改页面上的特定元素来改变样式，JavaScript CSS修改学习第三章：修改样式表，而这里的代码修改的是样式表，在这里查看W3C DOM-CSS的兼容性列表，两种方法都是用索引数字，第一条规则就是(css)Rules[0]，定义一个页面总是包含一个或者几个样

请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式，而这里的代码修改的是样式表。

在这里查看W3C DOM-CSS的兼容性列表。

定义

一个页面总是包含一个或者几个样式表，一个样式表里面包含一条或者几条规则，一条规则里有详细的样式声明。这个页面的样式表如下：

01　<link　rel="stylesheet"　href="../quirksmode.css">
02　<style>
03　<!--
04　@import　url("test.css");
05　　
06　p,h2,h3　{
07　　　　　padding-right:　10px;
08　}
09　　
10　pre.test　+　*　{
11　　　　　margin-right:　20%;
12　}
13　　
14　pre.test　{
15　　　　　background-color:　#ffffff;
16　}
17　-->
18　</style>

我们的目的是修改pre.test的白色背景为#EEF0F5。

样式表

所有外链或者内嵌的样式表都能通过document.styleSheets数组访问。quirksmode.css，这个网站的通用样式表保存在 document.styleSheets[0]里。上面这段特别的样式表段就保存在document.styleSheets[1]。我们就在这段代码上进行测试。

cssRules[]和rules[]

一条规则就是一个或者多个元素的一组声明。这里有两种访问规则的方法。W3C坚持使用cssRules[]，而微软坚持rules[]。两种方法都是用索引数字，第一条规则就是(css)Rules[0]，第二条就是(css)Rules[1]等等。

1　var　theRules　=　new　Array();
2　if　(document.styleSheets[1].cssRules)
3　　　　　theRules　=　document.styleSheets[1].cssRules
4　else　if　(document.styleSheets[1].rules)
5　　　　　theRules　=　document.styleSheets[1].rules

编缉推荐阅读以下文章

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