javascript 動態(tài)修改樣式和層疊樣式表代碼

更新時間：2010年04月27日 16:32:59 作者：

javascript 動態(tài)修改樣式和層疊樣式表代碼，需要的朋友可以參考下。

W3C DOM2樣式規(guī)則
==========================================================
CSSStyleSheet對象
　 CSSStyleSheet對象表示的是所有CSS樣式表，包括外部樣式表和使用<style type="text/css"></style>標簽指定的嵌入式樣式表。
CSSStyleSheet同樣構(gòu)建于其他的DOM2 CSS對象基礎(chǔ)之上，而CSSStyleRule對象表示的則樣式表中的每條規(guī)則。
　　通過document.stylesheets屬性可以取得文檔中CSSStyleSheet對象的列表，其中每個對象有下列屬性
　　type　　　　　　　　始終為text/css
　　disabled　　　　　　相應(yīng)樣式表是應(yīng)于還是禁用于當前文檔
　 href　　　　　　　　樣式表相對于當前文檔的URL
　　title　　　　　　　　分組樣式標簽
　　media　　　　　　樣式應(yīng)用的目標設(shè)備類型(screen、print)
　　ownerRule　　　　只讀CSSRule對象，若樣式用@import導(dǎo)入，表示其父規(guī)則
　　cssRules 　　　　　只讀cssRuleList列表對象，包含樣式表中所有CSSRule對象
　　==========================================================
　　insertRule(rule,index)　　　　添加新的樣式聲明
　　deleteRule(index)　　　　　從樣式表中移除規(guī)則
CSSStyleRule對象
　　每個CSSStyleSheet對象內(nèi)部包含著一組CSSStyleRule對象。這些對象分別對應(yīng)著類似下面這樣一條規(guī)則：
　　boyd{
　　　font:lucida,verdana,sans-serif;
　　　　background:#c7600f;
　　　　color:#1a3800;
　　}
CSSStyleRule對象具有下列屬性：
　　type　　　　　　　　繼承自CSSRule對象的一個屬性，以0~6中的一個數(shù)字表示規(guī)則類型
　　cssText　　　　　　以字符串形式表示的當前狀態(tài)下的全部規(guī)則
　　parentStyleSheet　　引用父CSSStyleRule對象
　　parentRule　　　　　如果規(guī)則位于另一規(guī)則中，該屬性引用另一個CSSRule對象
　　selectorText　　　　包含規(guī)則的選擇符
　　style　　　　　　　　與HTMLElement.style相似，是CSSStyleDeclaration對象的一個實例
CSSStyleDeclaration對象
　　表示一個元素的style屬性，與CSSStyleRule對象類似，CSSStyleDeclaration具有下面屬性：
　　cssText　　　　以字符串形式表示的全部規(guī)則
　　parentRule　　將引用CSSStyleRule對象
　　==========================================================
　　getPropertyValue(propertyName)　　　　　　CSS樣式屬性值
　　removeProperty(propertyName)　　　　　　從聲明中移除屬性
　　setProperty(propertyName,value,priority)　　設(shè)置CSS屬性值
把樣式置于DOM腳本之外
=========================================================
style屬性
　　style屬性本身是一個表示特定元素的所有不同CSS樣式的CSSStyleDeclaration對象，通過style屬性只能訪問到在元素的style屬性中以嵌入方式聲明的CSS屬性。換句話說，通過style屬性無法訪問到由多重樣式表層疊而來或者從父元素繼承的CSS屬性。

復(fù)制代碼代碼如下:

 
element.style.backgroundColor = 'red';　　//background-color被轉(zhuǎn)換為大小寫形式，必須的 
//設(shè)置id為"example"的元素的樣式 
setStyleById('example',{ 
　　'background-color' 　　: 　　'red', 
　　'border'　　　　　　 :　　'1px solid black', 
　　'padding'　　　　　　 :　　'1px', 
　　'margin'　　　　　　　:　　'1px' 
}); 
function setStyle(elementid,styles){　 
　　var element = document.getElementById(elementid); 
　　//循環(huán)遍歷styles對象并應(yīng)用每個屬性 
　　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轉(zhuǎn)換為wordWord 
function camelize(s) { 
return s.replace(/-(\w)/g, function(math,p1){ 
return p1.toUpperCase(); 
}); 
} 
//將wordWord轉(zhuǎn)換為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'; 

訪問計算樣式
　　在修改一個元素的表現(xiàn)之前，你可能希望首先確定它當前的樣式屬性，由于元素的style屬性只適用于以嵌入式方式定義的樣式，因此無法通過style取得計算樣式，DOM2規(guī)范在document.defaultView中包含一個名叫g(shù)etComputedStyle()的方法，該方法返回一個只讀的CSSStyleDeclaration對象，包含特定元素的所有計算樣式，如下：

復(fù)制代碼代碼如下:

 
　　var styles = document.defaultView.getComputedStyle(element); 
　　var color = styles.getProperty('background-color'); 

但是Microsoft有自己的屬性element.currentStyle版本

復(fù)制代碼代碼如下:

 
//取得一元素的計算樣式 
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; 
} 

您可能感興趣的文章: