cssRules在不同浏览器中的兼容性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在一份HTML文档中可以用三种方式添加样式信息：

1、通过<link>元素引用外部样式表；

2、通过<style>元素在文档的头部添加样式信息；

3、在具体的文档元素上通过style特性指定样式信息。

对于第三种样式信息可以在DOM中通过元素节点的style属性进行操作。

对于前两种样式信息在DOM中要通过CSSStyleSheet对象的属性和方法进行操作。

CSSStyleSheet对象有一个官方文档规定的cssRules属性，表示样式表中（上述前两种样式表）的样式规则的集合（每一条样式规则包含CSS选择器、大括号和括号中的键值对）。

还有一个不是官方规定的rules属性，是较早版本的IE浏览器中实现cssRules属性的专有属性（至少IE11是支持cssRules属性的）。

下面看例子。

例1 通过<link>元素引用外部样式表的情况

HTML文档的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>操作样式表</title>

 <link rel="stylesheet" type="text/css" href="theme.css" />

 <style type="text/css">

 #ul1{

   height: 3em;

   background-color: pink;

 }

 </style>

 </head>

 <body>

 <p id="p1">onq two</p>

 <h1>操作样式表</h1>

 <ul id="ul1">

    <li>one</li>

    <li>two</li>

 </ul>

 <input type="button" value="replace" onclick="test();" id="replace" />

 <input type="button" value="clone" onclick="clon();" />

 <input type="button" value="remove" onclick="remove();" />

 <input type="button" value="recovery" onclick="recovery();" />

 <script type="text/javascript">

 function test() {

    //第一种取得外部样式表的方法

    var link1 = document.styleSheets[0];

    //第二种取得外部样式表的方法

    var a = document.getElementsByTagName("link")[0];

    var link2 = a.sheet || a.styleSheet;

    //两种方法结果的对比

    alert(link1==link2);//true

    //取得外部样式表中的CSS代码

    var rules = link1.cssRules || link1.rules;

    //试图输出全部的样式规则

    alert(rules.cssText);//undefined

    //取得外部样式表中的第一条样式规则

    var rule = rules[0];

    //输出第一条样式规则

    alert(rule.cssText);

 }

 //将test()函数绑定到replace按钮的onclick事件上

 </script>

 </body>

 </html>

外部样式表的代码（文件名为theme.css）：

 #p1{

     background-color: #20B2AA;

     color: #FAF0E6;

     font-weight: bold;

     font-size: 2em;

     font-family: "Times New Roman",Georgia,Serif;

 }

 h1{

     font-family: "Times New Roman",Georgia,Serif;

     background-color: #3CB371;

 }

在IE11中的运行情况：