快捷導(dǎo)航

原生javascript獲取元素樣式屬性值的方法

更新時(shí)間：2010年12月25日 22:48:21 作者：

實(shí)際應(yīng)用中, 獲取元素樣式在實(shí)際應(yīng)用中一定常用到, 若是純粹html中, 直接elem.style.attr就可獲取, 但更多的時(shí)候我們是要從Css中獲取元素的最終樣式屬性.

所以, 我們得利用IE的currentStyle和W3C的getPropertyValue獲取.
elem.style.attr獲取樣式的方法就不說了. 先來看currentStyle方法, 此對象ie專屬, 代表了在全局樣式表、內(nèi)嵌樣式和 HTML 標(biāo)簽屬性中指定的對象格式和樣式. IE下通過它, 就可以獲取元素的Css屬性值.
而針對其他標(biāo)準(zhǔn)瀏覽器, W3C也提供了一個(gè)方法getPropertyValue, 此方法, 稍有點(diǎn)復(fù)雜, 首先要通過document.defaultView.getComputedStyle獲得Css的樣式對象, 然后通過該對象的getPropertyValue獲取屬性值.
上述兩種方法, 無論IE還是W3C的, 有一點(diǎn)是相同的, 它們所獲取的是元素Css屬性最終值. 這一點(diǎn)與Css的優(yōu)先級是相同的.
有一點(diǎn)不同的是, IE的方法是通過Css屬性的駝峰式名(如textAlign)獲取, 而W3C的方法是通過元素Css原來的屬性名(如text-align)獲取的, 所以, 在使用W3C方法時(shí), 需要對Css屬性名做個(gè)簡單的處理.
基于此, 我們可以封裝一個(gè)獲取元素屬性值的方法, 如下:

復(fù)制代碼代碼如下:

 
function attrStyle(elem,attr){ 
if(elem.attr){ 
//若樣式存在于html中,優(yōu)先獲取 
return elem.style[attr]; 
}else if(elem.currentStyle){ 
//IE下獲取CSS屬性最終樣式(同于CSS優(yōu)先級) 
return elem.currentStyle[attr]; 
}else if(document.defaultView && document.defaultView.getComputedStyle){ 
//W3C標(biāo)準(zhǔn)方法獲取CSS屬性最終樣式(同于CSS優(yōu)先級) 
//注意,此法屬性原格式(text-align)獲取的,故要轉(zhuǎn)換一下 
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase(); 
//獲取樣式對象并獲取屬性值 
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr); 
}else{ 
return null; 
} 
} 

記得精通JavaScript一書中獲取元素位置那一節(jié)(忘了是第6還是第7章), 有獲取元素樣式屬性值更詳細(xì)的解釋. 第一次知道document.defaultVies.getComputedStyle就是從這本書來的. 很棒的一本書, 有興趣的朋友話一定要看看.
原方發(fā)布于Mr.Think的博客: http://mrthink.net/js-get-cssproperty/

您可能感興趣的文章: