DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 再談動態添加樣式規則
再談動態添加樣式規則
編輯:CSS詳解     

以前我就是一篇博文 就給出一個好用的函數,它在我幾篇博文中被廣泛運用的。最近看了不少東西,於是便有了這篇博文,以梳理我學到的新東西。

毫無疑問,基於表現與結構相分離的原則,直接導入一個新的樣式表是最好的選擇,但有些情況就行不通,如我們做一個能拖動的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 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))

  }

}

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved