以前我就是一篇博文 就給出一個好用的函數,它在我幾篇博文中被廣泛運用的。最近看了不少東西,於是便有了這篇博文,以梳理我學到的新東西。
毫無疑問,基於表現與結構相分離的原則,直接導入一個新的樣式表是最好的選擇,但有些情況就行不通,如我們做一個能拖動的DIV,從設置樣式的角度看,就是把它絕對定位,以防影響原來的文檔流,然後一點點改變其top與left的值實現移動的效果。由於拖動是有時間概念的,一秒24幀,樣式表不可能面面俱到都把它們寫進去。因此動態生成樣式規則與快速修改樣式規則是非常有必要的,W3C為此做了大量的工作,在DOM2.0中,擴充了不少接口。
退一步說,表現與結構相分離也不止導入樣式表這一條路。要知道,一共有三種樣式類型,外部樣式,內部樣式,與內聯樣式。
新添加的接口主要集中在外部樣式中——之所以說接口,因為相應的實現是由浏覽器方提供的,像IE6那樣傲慢的家伙,從來無視它們的存在。
在W3C的模型中,type為"text/css"的link標簽與style標簽都是代表一個CSSStyleSheet對象,我們可以通過document.styleSheets 獲得當前頁面中所有的CSSStyleSheet對象,不過這是一個集合,非單純的數組。每一個CSSStyleSheet對象擁有如下屬性,
樣式規則對象(CSSStyleRule object),是W3C為了對樣式進行更細致的設定而搞出來的,如下面這個東西就是對應一個樣式規則對象:
button[type] {
padding:4px 10px 4px 7px;
line-height:17px;
}
樣式規則對象擁有如下幾個主要屬性:type,CSSText,parentStyleSheet,parentRule。
type有點類似節點的nodeType,對樣式規則進行細分,它是用一個整數來表示其類型。具體情況如下
cssText不用多說,一個非常有用的屬性,直接把字符串轉換成樣式規則,無視各浏覽器樣式屬性的差異,如CSSFloat 和styleFloat。
parentStyleSheet和parentRule都是針對@import來說的。不過,@import在IE下有問題,我基本不用它。
還有幾個生不逢時的方法:
我們可以弄一個設定樣式的函數出來:
var hyphenize =function(name){
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
}
var capitalize = function(prop){
return prop.replace(/\b[a-z]/g, function(match){
return match.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的校檢。
var addSheet = function(){
var doc,CSSCode;
if(arguments.length == 1){
doc = document;
CSSCode = arguments[0]
}else if(arguments.length == 2){
doc = arguments[0];
CSSCode = arguments[1];
}else{
alert("addSheet函數最多接受兩個參數!");
}
if(!+"\v1"){//新增功能,用戶只需輸入W3C的透明樣式,它會自動轉換成IE的透明濾鏡
var t = CSSCode.match(/opacity:(\d?\.\d+);/);
if(t!= null){
cssCode = CSSCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+");");
}
}
cssCode = CSSCode + "\n";//增加末尾的換行符,方便在firebug下的查看。
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style");
if(styleElements.length == 0){//如果不存在style元素則創建
if(doc.createStyleSheet){ //IE
doc.createStyleSheet();
}else{
var tempStyleElement = doc.createElement('style');//w3c
tempStyleElement.setAttribute("type", "text/CSS");
headElement.appendChild(tempStyleElement);
}
}
var styleElement = styleElements[0];
var media = styleElement.getAttribute("media");
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){ //IE
styleElement.styleSheet.cssText += CSSCode;//添加新的內部樣式
}else if(doc.getBoxObjectFor){
styleElement.innerHTML += CSSCode;//火狐支持直接innerHtml添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(CSSCode))
}
}