轉載來自:http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html
以前我就是一篇博文就給出一個好用的函數,它在我幾篇博文中被廣泛運用的。最近看了不少東西,於是便有了這篇博文,以梳理我學到的新東西。
毫無疑問,基於表現與結構相分離的原則,直接導入一個新的樣式表是最好的選擇,但有些情況就行不通,如我們做一個能拖動的DIV,從設置樣式的角度看,就是把它絕對定位,以防影響原來的文檔流,然後一點點改變其top與left的值實現移動的效果。由於拖動是有時間概念的,一秒24幀,樣式表不可能面面俱到都把它們寫進去。因此動態生成樣式規則與快速修改樣式規則是非常有必要的,W3C爲此做了大量的工作,在DOM2.0中,擴充了不少接口。
退一步說,表現與結構相分離也不止導入樣式表這一條路。要知道,一共有三種樣式類型,外部樣式,內部樣式,與內聯樣式。
- 外部樣式,就是我們上面說的那個,寫在一個獨立的CSS文件中。
- 內部樣式,就是獨立寫在一個style標籤中,通常是放在head標籤中,我最後提供的函數生成的樣式就是內部樣式。
- 內聯樣式,就是寫在元素的style屬性中的樣式。
新添加的接口主要集中在外部樣式中——之所以說接口,因爲相應的實現是由瀏覽器方提供的,像IE6那樣傲慢的傢伙,從來無視它們的存在。
在W3C的模型中,type爲"text/css"的link標籤與style標籤都是代表一個CSSStyleSheet對象,我們可以通過document.styleSheets 獲得當前頁面中所有的CSSStyleSheet對象,不過這是一個集合,非單純的數組。每一個CSSStyleSheet對象擁有如下屬性,
- type:永遠返回“text/css”字符串。
- disabled:和input的disabled的作用相同,默認是false。
- href:返回URL,如果是style標籤爲null。
- title:返回其title的值,title與普通元素的title無異,隨你寫什麼。
- media:IE與火狐返回的東西並不一致,不太好說。media是用來規定它擁有的樣式規則對什麼設備有效,默認是所有。
- ownerRule:返回一個只讀的CSSRule對象,如果樣式表是用@import引入的話。
- cssRules: 返回一個只讀的樣式規則對象(CSSStyleRule object)的集合。
樣式規則對象(CSSStyleRule object),是W3C爲了對樣式進行更細緻的設定而搞出來的,如下面這個東西就是對應一個樣式規則對象:
button[type] { padding : 4px 10px 4px 7px ;
line-height : 17px ;
} |
樣式規則對象擁有如下幾個主要屬性:type,cssText,parentStyleSheet,parentRule。
type有點類似節點的nodeType,對樣式規則進行細分,它是用一個整數來表示其類型。具體情況如下
- 0: CSSRule.UNKNOWN_RULE
- 1: CSSRule.STYLE_RULE (定義一個CSSStyleRule對象)
- 2: CSSRule.CHARSET_RULE (定義一個CSSCharsetRule對象,用於設定當前樣式表的字符集,默認與當前網頁相同)
- 3: CSSRule.IMPORT_RULE (定義一個CSSImportRule對象,就是用@import引入其他的樣式表)
- 4: CSSRule.MEDIA_RULE (定義一個CSSMediaRule對象,用於設定此樣式是用於顯示器,打印機還是投影機等等)
- 5: CSSRule.FONT_FACE_RULE (定義一個CSSFontFaceRule對象,CSS3的@font-face)
- 6: CSSRule.PAGE_RULE (定義一個CSSPageRule對象)
cssText不用多說,一個非常有用的屬性,直接把字符串轉換成樣式規則,無視各瀏覽器樣式屬性的差異,如cssFloat 和styleFloat。
parentStyleSheet和parentRule都是針對@import來說的。不過,@import在IE下有問題,我基本不用它。
還有幾個生不逢時的方法:
- nsertRule(rule,index): 添加一條樣式規則。
- deleteRule(index): 移除一條樣式規則。
- getPropertyValue(propertyName) 獲取元素相應樣式屬性的值。如我們獲得一個樣式規則對象,可以利用CSSStyleRuleObject. getPropertyValue("color")獲得其字體顏色的設置。與普通的el.style.color的方法相比,其效率相當高,因爲el.style.color獲取的是內聯樣式,像IE那樣的怪胎,如果你的元素沒有設置style屬性,根本無法得到準備的值,可能爲空,可能是inhert……可能還有兼容問題,而且這內聯屬性不一定是最終應用於元素的樣式,IE只有調用不那麼廢物的el.currentStyle[prop],其他瀏覽器就調用相當爭氣但有點麻煩的document. defaultView. getComputedStyle(el, "")[prop]。
- removeProperty(propertyName) 移除元素相應樣式屬性。
- setProperty(propertyName,value,priority)設定元素添加一個樣式,還能指定優先級。
我們可以弄一個設定樣式的函數出來:
var hyphenize = function (name){
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
} var camelize = function (name){
return name.replace(/\-(\w)/g, function (all, letter){
return letter.toUpperCase();
});
} var setStyle = function (el, styles) {
for ( var property in styles) {
if (!styles.hasOwnProperty(property)) continue ;
if (el.style.setProperty) {
//必須是連字符風格,el.style.setProperty('background-color','red',null);
el.style.setProperty(hyphenize(property),styles[property], null );
} else {
//必須是駝峯風格,如el.style.paddingLeft = "2em"
el.style[camelize(property)] = styles[property]
}
}
return true ;
} |
使用方法:
setStyle(div,{ 'left' :0,
'top' :0,
'line-height' : '2em' ,
'padding-right' : '4px'
}); |
不過我非常不喜歡這方法,生成的是內聯樣式,它還得特殊處理float與opacity。在IE7的內聯樣式中,濾鏡還有一個Bug,一定要讓其得到hasLayout,要不濾鏡就不會生效(我們可以通過el.currentStyle.hasLayout查看其狀況)。因此,如其一個個設置,不如用cssText一網打盡。
最後附上我的加強版addSheet方法。它增添自動處理opacity的功能,也就是說我們只需要按標準設置cssText,它會自動生成相應的濾鏡,這樣一來至少讓火狐等瀏覽器通過W3C的校檢。
//2010.01.27更新 司徒正美 var addSheet = function (css){
if (!-[1,]){
css = css.replace(/opacity:\s*(\d?\.\d+)/g, function ($,$1){
$1 = parseFloat($1) * 100;
if ($1 < 0 || $1 > 100)
return "" ;
return "filter:alpha(opacity=" + $1 + ");"
});
}
css += "\n" ; //增加末尾的換行符,方便在firebug下的查看。
var doc = document, head = doc.getElementsByTagName( "head" )[0],
styles = head.getElementsByTagName( "style" ),style,media;
if (styles.length == 0){ //如果不存在style元素則創建
if (doc.createStyleSheet){ //ie
doc.createStyleSheet();
} else {
style = doc.createElement( 'style' ); //w3c
style.setAttribute( "type" , "text/css" );
head.insertBefore(style, null )
}
}
style = styles[0];
media = style.getAttribute( "media" );
if (media === null && !/screen/i.test(media) ){
style.setAttribute( "media" , "all" );
}
if (style.styleSheet){ //ie
style.styleSheet.cssText += css; //添加新的內部樣式
} else if (doc.getBoxObjectFor){
style.innerHTML += css; //火狐支持直接innerHTML添加樣式表字串
} else {
style.appendChild(doc.createTextNode(css))
}
}
|
有網友問,爲何要優先使用已有樣式表來添加新的樣式規則,這是因爲在IE(包括IE6、IE7和IE8 beta1)中有如下限制:
- 文檔中只有前31個link或style標記關聯的CSS能夠應用。 從第32個開始,其標記關聯的CSS都將失效。IE的官方文檔All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及這個限制,包括在使用.xsl的.xml文件也有這個限制。
- 一個style標記只有前31次@import指令有效應用。從第32個@import指令開始忽略。
- 一個css文件只有前31次@import指令有效應用。從第32個@import指令開始忽略。
- IE中每個style標籤或css文件的選擇符個數不能超過4095。
- @import指令下層疊限制不能超過4層在IE下通過@import指令引入css文件時,第5層會失效。這個限制來自Cascade limit via @import rule。實際上,由於瀏覽器對多層嵌套的支持不完善,所以即使不得已使用了@import指令引入CSS文件,也不要超過2層。