获取元素的css属性之getComputedStyle

标签：asc   blog   属性   current   读取   support   null   pop   包括   

　　习惯了用jQuery的css()的方法获取元素的css属性，突然不用jQquery了，当要获得元素的css时候，我瞬间停顿了一下，咦？咋获取元素的css值？比如获取元素的width。是这样么？document.getElementById("id").style.width?

一、getComputedStyle
　　getComputedStyle，见名之意，就是获取元素计算之后的样式属性值，也就是获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，注意是只读。
语法：var style = window.getComputedStyle("元素", "伪类");
说明：第二个参数可以省略

如获得元素的width：
　　var ele = document.getElementById("XXX");
　　var _width = window.getComputedStyle(ele).width;

二、getComputedStyle与style的区别
　　1、getComputedStyle方法是只读的，只能获取样式，不能设置；
　　2、element.style能读取，能设置，但是注意，只能读取元素中style属性中的样式。
　　3、getComputedStylen能获取所有的css属性，包括默认的。

三、getComputedStyle与defaultView
　　defaultView又是什么东东？jQuery获取样式方式就是如下：

var getStyles = function( elem ) {

		// Support: IE <=11 only, Firefox <=30 (#15098, #14150)
		// IE throws on elements created in popups
		// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
		var view = elem.ownerDocument.defaultView;

		if ( !view || !view.opener ) {
			view = window;
		}

		return view.getComputedStyle( elem );
	};

　　虽然window上命名有getComputedStyle属性了，直接但是使用window.getComputedStyle（ele）不会有啥问题，但是在火狐就会有问题，jQuery也在备注中写好了。

四、getComputedStyle兼容性
　　别想了，此处IE不整点名堂怎么证明当初它式浏览器中的一霸主呢？
IE给自己提供了一套方法。IE中使用currentStyle代替getComputedStyle
　　如获得元素width：
　　element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).width;

获取元素的css属性之getComputedStyle

标签：asc   blog   属性   current   读取   support   null   pop   包括   

原文地址：http://www.cnblogs.com/leaf930814/p/6985017.html