### JavaScript CSS修改学习第三章：修改样式表
#### 样式表的基础概念
页面样式通常由一个或多个样式表定义，这些样式表由多条规则组成。每条规则又包含了一系列的样式声明。通过JavaScript我们可以访问和修改这些样式表，从而改变页面上元素的显示效果。
#### JavaScript操作样式表的方法
在JavaScript中，我们可以通过`document.styleSheets`数组访问文档中所有的样式表。每一张样式表都可以使用`cssRules`或者`rules`属性来获取其规则列表。
- `cssRules`是W3C推荐的属性，它返回一个`CSSRuleList`对象，该对象包含了样式表中所有的CSS规则。
- `rules`属性是IE特有的一种非标准方法，返回一个`RuleList`对象，同样包含了所有的规则。
#### 兼容性问题
不同浏览器在处理`document.styleSheets`时存在兼容性问题。例如，Safari、IE7 beta3和MacIE对规则的解释各不相同，这就导致了同样的代码在不同浏览器上可能产生不同的效果。这使得跨浏览器地直接通过脚本修改样式表变得复杂。
#### 直接修改样式声明
一旦获取了样式规则的列表，我们就可以通过索引访问特定的规则。然后，通过修改`style`属性来更改该规则的特定样式声明。例如，要将`pre.test`的背景颜色改为`#EEF0F5`，可以使用类似下面的代码：
```javascript
if (document.styleSheets[1].cssRules) {
var theRules = document.styleSheets[1].cssRules;
theRules[3].style.backgroundColor = '#EEF0F5'; // 对应pre.test规则
} else if (document.styleSheets[1].rules) {
var theRules = document.styleSheets[1].rules;
theRules[4].style.backgroundColor = '#EEF0F5'; // 对应pre.test规则在IE中的索引
}
```
#### 浏览器差异导致的问题
- Safari会将`pre.test[CLASS~="test"]`视为单独的规则，导致规则数量不一致。
- IE7beta3会将多个选择器组合在一起的规则拆分成多条规则。
- MacIE会对选择器进行改写，如将`pre.test+*`改为`pre.test*`，造成样式声明的差异。
- Mozilla和Opera9将`p,h2,h3`视为一条规则，而IE和早期的Mozilla会将其拆分为多条规则。
#### 非标准属性的限制
使用索引值访问规则的方法存在严重问题，因为不同浏览器对索引的解释不一致，导致无法准确地访问到期望的规则。浏览器并没有提供一种标准的通过选择器名称直接访问规则的方法，使得访问和修改样式表的操作变得不可靠。
#### 样式声明的修改
当成功访问到某条样式规则后，我们可以使用`rule.style.propertyName`的方式来修改具体的样式声明。例如，要修改颜色属性，可以这样做：
```javascript
// 假设rule是已获取的某条规则对象
rule.style.color = '#0000cc';
```
#### 结论
在JavaScript中修改样式表，尽管技术上可行，但由于浏览器之间的严重不兼容，使得这种方法变得非常复杂和不稳定。在实际开发中，更推荐使用直接修改DOM元素样式的方法，或者操作CSS类名来间接修改样式表，以保证跨浏览器的兼容性。
