所以, 我們得利用IE的currentStyle和W3C的getPropertyValue擷取.
elem.style.attr擷取樣式的方法就不說了. 先來看currentStyle方法, 此對象ie專屬, 代表了在全域樣式表、內嵌樣式和 HTML 標籤屬性中指定的對象格式和樣式. IE下通過它, 就可以擷取元素的Css屬性值.
而針對其他標準瀏覽器, W3C也提供了一個方法getPropertyValue, 此方法, 稍有點複雜, 首先要通過document.defaultView.getComputedStyle獲得Css的樣式對象, 然後通過該對象的getPropertyValue擷取屬性值.
上述兩種方法, 無論IE還是W3C的, 有一點是相同的, 它們所擷取的是元素Css屬性最終值. 這一點與Css的優先順序是相同的.
有一點不同的是, IE的方法是通過Css屬性的駝峰式名(如textAlign)擷取, 而W3C的方法是通過元素Css原來的屬性名稱(如text-align)擷取的, 所以, 在使用W3C方法時, 需要對Css屬性名稱做個簡單的處理.
基於此, 我們可以封裝一個擷取元素屬性值的方法, 如下:
複製代碼 代碼如下:function attrStyle(elem,attr){
if(elem.attr){
//若樣式存在於html中,優先擷取
return elem.style[attr];
}else if(elem.currentStyle){
//IE下擷取CSS屬性最終樣式(同於CSS優先順序)
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
//W3C標準方法擷取CSS屬性最終樣式(同於CSS優先順序)
//注意,此法屬性原格式(text-align)擷取的,故要轉換一下
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
//擷取樣式對象並擷取屬性值
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
}
記得精通JavaScript一書中擷取元素位置那一節(忘了是第6還是第7章), 有擷取元素樣式屬性值更詳細的解釋. 第一次知道document.defaultVies.getComputedStyle就是從這本書來的. 很棒的一本書, 有興趣的朋友話一定要看看.
原方發佈於Mr.Think的部落格: http://mrthink.net/js-get-cssproperty/
