JavaScript 访问与修改外部样式表的完整指南

JavaScript访问样式表概述

本文档记录如何使用JavaScript访问和操作网页样式表。

JavaScript可以直接访问网页元素内联的style属性，例如以下HTML结构：

<div id="main" style="background-color:red"></div>

利用JavaScript读取该元素的style属性：

alert(document.getElementById("main").style.backgroundColor);

同样，JavaScript也可以修改元素的style属性：

document.getElementById("main").style.backgroundColor="blue";

上述代码是常见的做法，但在实际开发中，我们通常通过外部样式表来控制元素的外观。例如引入外部CSS文件：

<html> <head> <meta http-equiv="Content-Type" c /> <title>JS控制CSS</title> <style type="text/css"> #main { margin-left:200px; margin-top:70px; width:200px; height:100px; background-color<img src="/editor/images/smilies/default/17.gif" />999999; border:1px solid #666666; } </style> </head> <body> <div id="main">Show</div> <input type="button" value="获得样式" /> <input type="button" value="写入样式" /> <input type="button" value="获得最终样式" /> </body> </html> 

如果此时再次尝试使用 alert(document.getElementById("main").style.backgroundColor);

将只能获得空值，因此必须通过JavaScript访问样式表本身。

获取浏览器兼容的CSS规则集合

document.styleSheets属性可以获取页面中所有样式表的集合。由于不同浏览器对样式表规则的实现存在差异，DOM标准规定每个样式表对应一个cssRules集合，Mozilla和Safari等浏览器正确实现了这一标准。然而，IE浏览器将该集合定义为rules。因此，可以使用以下兼容代码来获取正确的规则对象：

var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;

这样即可兼容不同浏览器获取CSS规则集合。

读取与修改样式表规则

接下来，通过JavaScript代码从样式表中提取具体样式：

function GetCSS()
{ 
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
alert(oCssRules[0].style.backgroundColor);
} 

其中，styleSheets[0]表示第一个样式表引用，oCssRules[0]表示该样式表中的第一条样式规则（即#main{}的内容），通过style属性即可访问具体样式值。

同理，修改该样式表规则的代码如下：

function SetCSS()
{ 
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
oCssRules[0].style.backgroundColor="red";
oCssRules[0].style.marginLeft="20px";
oCssRules[0].style.marginTop="20px";
} 

需要注意的是，由于多个元素可能关联同一个样式表，修改规则时需格外谨慎，避免影响其他元素。

获取元素最终计算样式

除了元素的style对象和CSS规则外，每个元素还有一个最终样式（Computed Style），它反映了元素在屏幕上实际显示的效果，即内联样式与CSS规则计算后的结果。IE和DOM标准提供了两种访问最终样式的方式：IE通过currentStyle属性，而DOM标准使用getComputedStyle()方法。

JavaScript获取最终样式的方法如下：

function GetFinalCSS()
{ 
var oDiv=document.getElementById("main");
//访问style属性
alert(oDiv.style.backgroundColor);
//IE方法
alert(oDiv.currentStyle.backgroundColor);
//DOM方法，第二个参数为伪元素，如:hover,first-leeter之类
//alert(document.defaultView.getComputeStyle(oDiv,null).backgroundColor);
} 

在实际使用中，我常通过currentStyle获取样式，以简化访问样式表的步骤。

需要注意的是，currentStyle是只读属性，无法直接赋值，因为它代表的是多种样式综合计算后的结果，这一特性易于理解。

对于getComputedStyle方法，可以通过document.defaultView调用（注意IE和Safari旧版本不支持此方法）。因此，在使用getComputedStyle时，建议在多种浏览器上进行充分测试。