javascript 動態修改樣式和層疊樣式表代碼
2024-05-06 14:10:18
供稿：網友
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屬性。
