|
還有幾個(gè)生不逢時(shí)的方法：
- nsertRule(rule,index): 添加一條樣式規(guī)則。
- deleteRule(index): 移除一條樣式規(guī)則。
- getPropertyValue(propertyName) 獲取元素相應(yīng)樣式屬性的值。如我們獲得一個(gè)樣式規(guī)則對(duì)象，可以利用CSSStyleRuleObject. getPropertyValue("color")獲得其字體顏色的設(shè)置。與普通的el.style.color的方法相比，其效率相當(dāng)高，因?yàn)閑l.style.color獲取的是內(nèi)聯(lián)樣式，像IE那樣的怪胎，如果你的元素沒(méi)有設(shè)置style屬性，根本無(wú)法得到準(zhǔn)備的值，可能為空，可能是inhert……可能還有兼容問(wèn)題，而且這內(nèi)聯(lián)屬性不一定是最終應(yīng)用于元素的樣式，IE只有調(diào)用不那么廢物的el.currentStyle[prop]，其他瀏覽器就調(diào)用相當(dāng)爭(zhēng)氣但有點(diǎn)麻煩的document. defaultView. getComputedStyle(el, "")[prop]。
- removeProperty(propertyName) 移除元素相應(yīng)樣式屬性。
- setProperty(propertyName,value,priority)設(shè)定元素添加一個(gè)樣式，還能指定優(yōu)先級(jí)。
我們可以弄一個(gè)設(shè)定樣式的函數(shù)出來(lái)：
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) {
//必須是連字符風(fēng)格，el.style.setProperty('background-color','red',null);
el.style.setProperty(hyphenize(property),styles[property],null);
} else {
//必須是駝峰風(fēng)格，如el.style.paddingLeft = "2em"
el.style[camelize(property)] = styles[property]
}
}
return true;
}
使用方法：
setStyle(div,{
'left':0,
'top':0,
'line-height':'2em',
'padding-right':'4px'
});
不過(guò)我非常不喜歡這方法，生成的是內(nèi)聯(lián)樣式，它還得特殊處理float與opacity。在IE7的內(nèi)聯(lián)樣式中，濾鏡還有一個(gè)Bug，一定要讓其得到hasLayout，要不濾鏡就不會(huì)生效(我們可以通過(guò)el.currentStyle.hasLayout查看其狀況)。因此，如其一個(gè)個(gè)設(shè)置，不如用cssText一網(wǎng)打盡。
最后附上我的加強(qiáng)版addSheet方法。它增添自動(dòng)處理opacity的功能，也就是說(shuō)我們只需要按標(biāo)準(zhǔn)設(shè)置cssText，它會(huì)自動(dòng)生成相應(yīng)的濾鏡，這樣一來(lái)至少讓火狐等瀏覽器通過(guò)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函數(shù)最多接受兩個(gè)參數(shù)!");
}
if(!+"\v1"){//新增功能，用戶(hù)只需輸入W3C的透明樣式，它會(huì)自動(dòng)轉(zhuǎn)換成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元素則創(chuàng)建
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;//添加新的內(nèi)部樣式
}else if(doc.getBoxObjectFor){
styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}
原文：http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html
本文鏈接：http://www.95time.cn/tech/web/2009/6984.asp 
出處：
責(zé)任編輯：bluehearts
上一頁(yè) 再談動(dòng)態(tài)添加樣式規(guī)則 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 再談動(dòng)態(tài)添加樣式規(guī)則 [2]
