javascript 动态修改样式和层叠样式表代码
2020-02-28 04:08:44
供稿：网友
W3C DOM2样式规则
==========================================================
CSSStyleSheet对象
CSSStyleSheet对象表示的是所有CSS样式表，包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表。
CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上，而CSSStyleRule对象表示的则样式表中的每条规则。
通过document.stylesheets属性可以取得文档中CSSStyleSheet对象的列表，其中每个对象有下列属性
type 始终为text/css
disabled 相应样式表是应于还是禁用于当前文档
href 样式表相对于当前文档的URL
title 分组样式标签
media 样式应用的目标设备类型(screen、print)
ownerRule 只读CSSRule对象，若样式用@import导入，表示其父规则
cssRules 只读cssRuleList列表对象，包含样式表中所有CSSRule对象
==========================================================
insertRule(rule,index) 添加新的样式声明
deleteRule(index) 从样式表中移除规则
CSSStyleRule对象
每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象。这些对象分别对应着类似下面这样一条规则：
boyd{
font:lucida,verdana,sans-serif;
background:#c7600f;
color:#1a3800;
}
CSSStyleRule对象具有下列属性：
type 继承自CSSRule对象的一个属性，以0~6中的一个数字表示规则类型
cssText 以字符串形式表示的当前状态下的全部规则
parentStyleSheet 引用父CSSStyleRule对象
parentRule 如果规则位于另一规则中，该属性引用另一个CSSRule对象
selectorText 包含规则的选择符
style 与HTMLElement.style相似，是CSSStyleDeclaration对象的一个实例
CSSStyleDeclaration对象
表示一个元素的style属性，与CSSStyleRule对象类似，CSSStyleDeclaration具有下面属性：
cssText 以字符串形式表示的全部规则
parentRule 将引用CSSStyleRule对象
==========================================================
getPropertyValue(propertyName) CSS样式属性值
removeProperty(propertyName) 从声明中移除属性
setProperty(propertyName,value,priority) 设置CSS属性值
把样式置于DOM脚本之外
=========================================================
style属性
style属性本身是一个表示特定元素的所有不同CSS样式的CSSStyleDeclaration对象，通过style属性只能访问到在元素的style属性中以嵌入方式声明的CSS属性。换句话说，通过style属性无法访问到由多重样式表层叠而来或者从父元素继承的CSS属性。
