Javascript實現(xiàn)一個獲取元素樣式的函數(shù)getStyle
元素的CSS樣式，除了包括內(nèi)聯(lián)的（即通過style屬性加上的）樣式定義外，還有頁面嵌入的css和外部引入的css兩種方式。但在JS中通過el.style.xxx只能獲取的內(nèi)聯(lián)的樣式屬性，這就存在比較大的局限性。好在瀏覽器都提供了另外的方式來獲取以其它方式定義的樣式屬性，在IE中有currentStyle、FF等w3c標(biāo)準(zhǔn)的瀏覽器中有g(shù)etComputedStyle。
參考了幾個JS-Lib的代碼，決定實現(xiàn)一個簡化版的getStyle函數(shù)。該函數(shù)目標(biāo)為：滿足大多數(shù)需要、跨瀏覽器、代碼簡潔、性能優(yōu)良。本著這幾點要求，本人花了一個小時的時間才搞定，主要利用了“JS邏輯運(yùn)算符特性、代碼"編譯"，函數(shù)的即時執(zhí)行”幾個小技巧，寫到這里，以備以后使用，如果能對哪位朋友有幫助，那當(dāng)然更好。
程序代碼
var getStyle=function(){
var f=document.defaultView;
return new Function('el','style',[
"style.indexOf('-')>-1 && (style=style.replace(/-(\\w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (style='",
f ? 'cssFloat' : 'styleFloat',
"');return el.style[style] || ",
f ? 'window.getComputedStyle(el, null)[style]' : 'el.currentStyle[style]',
' || null;'].join(''));
}();
//使用示例：
var el=document.getElementById('test');
getStyle(el,'line-height');
getStyle(el,'color');
getStyle(el,'float');
【編輯推薦】
