document.styleSheets对象集合介绍

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的应用：

[url]http://demos.mootools.net/Fx.Morph[/url]

 

 

文章地址： [url]http://hi.baidu.com/vsign/blog/item/4fd20ce953956c3bb90e2d3f.html[/url]