js原生获取元素的css属性

　　习惯了用jQuery的css()的方法获取元素的css属性，突然不用jquery了，当要获得元素的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、getComputedStyle能获取所有的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;

五、获取元素样式的兼容性封装

function getCss(obj,attribute) {
        if(obj.currentStyle) {
            return obj.currentStyle[attribute];}
        else {
            return window.getComputedStyle(obj,null)[attribute];
        }
}

　如获取id为button的背景颜色

var _btn = document.getElementById("button");
console.log(getCss(_btn, 'backgroundColor'));

 

五、思考

getComputedStyle会引起回流，因为它需要获取祖先节点的一些信息进行计算（譬如宽高等），所以用的时候慎用，回流会引起性能问题。

回流:

也称为Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树

什么会引起回流？

1.页面渲染初始化

2.DOM结构改变，比如删除了某个节点

3.render树变化，比如减少了padding

4.窗口resize

5.最复杂的一种：获取某些属性，引发回流。

很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流，但是除了render树的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效，包括：

1. offset(Top/Left/Width/Height)

2. scroll(Top/Left/Width/Height)

3. cilent(Top/Left/Width/Height)

4. width,height

5. 调用了getComputedStyle()或者IE的currentStyle

6. 修改字体

回流一定伴随着重绘，重绘却可以单独出现。所以一般会有一些优化方案，如：

• 减少逐项更改样式，最好一次性更改style，或者将样式定义为class并一次性更新

• 避免循环操作dom，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document

• 避免多次读取offset等属性。无法避免则将它们缓存到变量

• 将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高

 

六、另记

怎样用 JavaScript 准确获取手机屏幕的宽度和高度？

function getViewportSize () {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    };
}