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屬性。
復制代碼 代碼如下:
element.style.backgroundColor = 'red'; //background-color被轉換為大小寫形式，必須的
//設置id為"example"的元素的樣式
setStyleById('example',{
'background-color' : 'red',
'border' : '1px solid black',
'padding' : '1px',
'margin' : '1px'
});
function setStyle(elementid,styles){
var element = document.getElementById(elementid);
//循環遍歷styles對象並應用每個屬性
for(property in styles){
//非styles直接定義的屬性
if(!styles.hasOwnProperty(property)) continue;
if(element.style.setProperty){
element.style.setProperty(uncamlize(property, '-'), styles[property], null);
} else {
element.style[camelize(property)] = styles[property];
}
}
return true;
}
//將word-word轉換為wordWord
function camelize(s) {
return s.replace(/-(\w)/g, function(math,p1){
return p1.toUpperCase();
});
}
//將wordWord轉換為word-word
function uncamelize(s, sep) {
sep = sep || '-';
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
return p1 + sep + p2.toLowerCase();
});
}
//基於className切換樣式
element.className += 'newclass';
訪問計算樣式 在修改一個元素的表現之前，你可能希望首先確定它當前的樣式屬性，由於元素的style屬性只適用於以嵌入式方式定義的樣式，因此無法通過style取得計算樣式，DOM2規范在document.defaultView中包含一個名叫getComputedStyle()的方法，該方法返回一個只讀的CSSStyleDeclaration對象，包含特定元素的所有計算樣式，如下：
復制代碼 代碼如下:
var styles = document.defaultView.getComputedStyle(element);
var color = styles.getProperty('background-color');
但是Microsoft有自己的屬性element.currentStyle版本
復制代碼 代碼如下:
//取得一元素的計算樣式
function getStyle(element,property) {
var value = element.style[camelize(property)];
if(!value) {
if(document.defaultView && document.defaultView.getComputedStyle) {
value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
} else if(element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
return value;
}