原生JS获取元素样式属性值的方法

实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从CSS中获取元素的最终样式属性.所以, 我们得利用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.style[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就是从这本书来的. 很棒的一本书, 有兴趣的朋友话一定要看看.

共有 1 条评论.

发表评论18,746 Views

  1. 博主,document.getElementById(‘div1′).style.display 这样我就获取不到样式的值呢。

    [回复]

发表评论[无需注册]


渔夫科技