所以, 我們得利用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/