document.styleSheets对象集合介绍

Javascript piniu 1239浏览 0评论

Document.styleSheets:一组关联于文档的样式表片段集合.

Document.styleSheet:一个关联于文档的样式表片段对象.

function getDocStyleSheets(){
	var doc_styleSheets=document.styleSheets;
	return doc_styleSheets;
}
var css01=getDocStyleSheets()[0]; //得到文档中关联的第一个stylesheet片段对象.

stylesheet对象
1. 对于Firefox公开的对象:
type
disabled
ownerNode
parentStyleSheet
href
title
media
ownerRule
cssRules
insertRule
deleteRule

2. 对于IE公开的对象:
owningElement
pages
id
type
href
disabled
cssText
readOnly
title
parentStyleSheet
imports
rules
media

兼容IE&FireFox的对象:
disabled –> 是否启用此css定义片段

//eg.
css01.disabled=true;  //这时当前文档将忽略css01的css定义

rules–>css定义集合[IE专有],可读写
cssRules–>css定义规则集合[Firefox专有]可读写

//eg.
var css01_Rules=css01.rules || css01.cssRules;
css01_Rules.style.fontSize='12px';

这时候将改变css定义中

body{
   font-size:14px;
}
function getDocStyleSheets(){
    var doc_styleSheets=document.styleSheets;
    return doc_styleSheets;
}
var css01 = getDocStyleSheets()[0]; //得到文档中关联的第一个stylesheet片段对象.

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


发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: