document.styleSheets对象集合介绍

Document.styleSheets Info

Document.styleSheets：

Document.styleSheet：

/**
    * 得到 styleSheets:方法
    * @return Array of styleSheet 
    */
      function getDocStyleSheets(){
        var doc_styleSheets=document.styleSheets;
     return doc_styleSheets;
      }      
   var css01=getDocStyleSheets()[0];//得到文档中关联的第一个stylesheet片段对象.
   /*
   stylesheet对象
   对于Firefox公开的对象:
   type 
   disabled
   ownerNode
   parentStyleSheet
   href
   title
   media
   ownerRule
   cssRules
   insertRule 
   deleteRule
   _____________________________________________
   stylesheet对象
   对于IE公开的对象:
   owningElement 
   pages 
   id 
   type 
   href 
   disabled 
   cssText 
   readOnly 
   title 
   parentStyleSheet 
   imports 
   rules 
   media
   兼容IE&FireFox的对象:
    disabled --> 是否启用此css定义片段
    e g.
    css01.disabled=true;
    这时当前文档讲忽略css01的css定义
    
    rules-->css定义集合[IE专有],可读写
    cssRules-->css定义规则集合[Firefox专有]可读写
    e g.
    var css01_Rules=css01.rules||css01.cssRules;
    css01_Rules.style.fontSize='12px';
    这时候将改变css定义中body{
    font-size:14px;
    }
    页面所有文字大小讲改变。
   */

这种应用可以应用在对于页面大量dom元素的渲染操作。非常节省客户端资源。免除了遍历DOM节点。免除了给每个dom节点设置特定的id或className

著名js框架mootools对document.styleSheets的应用：

http://demos.mootools.net/Fx.Morph