document.styleSheets对象集合介绍

document.styleSheets对象集合介绍

Document.styleSheets Info

/**
* 得到 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