document.styleSheets[0].rules 与 cssRules区别_javascript技巧

今天使用firefox，突然发现一点小问题。前者用于IE，后者用于mozilla浏览器。
 

<style type="text/css"> a {color:red} </style> <script> if(document.styleSheets[0].cssRules){ alert(document.styleSheets[0].cssRules[0].style.cssText) }else{ alert(document.styleSheets[0].rules[0].style.cssText) } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

而且 rules 和 cssRules 的计数方法也是不一样的！rules 是第几个选择器；cssRules 是第几条规则。分别用 IE 和 firefox 运行下面的代码可知。

<style type="text/css"> a,div,p {color:red} h5 {color:blue} </style> <script> if(document.styleSheets[0].cssRules){ alert(document.styleSheets[0].cssRules[1].selectorText+":"+document.styleSheets[0].cssRules[1].style.cssText) }else{ alert(document.styleSheets[0].rules[1].selectorText+":"+document.styleSheets[0].rules[1].style.cssText) } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]