js原生中得到计算后样式

js原生中得到计算后样式

当我们在操作DOM的时候，我们采用dom对象打点的方式获得样式值时，我们只能得到行内的样式；事实上DOM为我们提供了可靠的API，以得到计算后的样式。

高级浏览器中：
以下写法等价

	window.getComputedStyle(oDiv).getPropertyValue("padding-left");
	getComputedStyle(oDiv).getPropertyValue("padding-left");
	getComputedStyle(oDiv)["padding-left"];

要注意，引号里面不是驼峰命名法：

IE6、7、8
不兼容getComputedStyle.getPropertyValue()的写法，有另外一套写法：附加在元素身上的currentStyle属性，它表现和style点语法一样，使用驼峰式访问。
以下写法的等价

	oDiv.currentStyle.paddingLeft;
	oDiv.currentStyle["paddingLeft"];

DOM已经提供给我们计算后的样式，但是还觉得不方便，所以DOM又提供给我们一些API：

ele.offsetLeft
ele.offsetTop
ele.offsetWidth
ele.offsetHeight
ele.clientWidth
ele.clientHeight

offsetLeft属性和offsetTop属性

这两个属性的兼容性非常差

IE9及以上、Chrome等高级浏览器中：
一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离。(图片来自网络)

每一个元素的offsetParent属性，表示自己的“偏移参考盒子”，就叫offsetParent。这个offsetParent如何去找呢。
就是自己祖先元素中，离自己最近的已经定位的元素，如果自己的祖先元素中，没有任何盒子进行了定位，那么offsetParent对象就是body。

高级浏览器中，无论这个盒子自己是否定位，自己的offsetParent就是按照上述方法寻找。

IE8中：
与高级浏览器基本相同！但是，多算了父盒子的一条边框。

IE6、IE7：
IE6、7的offsetParent对象是谁，和高级浏览器有大的不同。
情形1：自己如果没有定位属性，那么自己的offsetParent对象就是自己的祖先元素中离自己最近的有width或者有height的元素：

1	<div class="box1">
2		<div class="box2">  → 我有宽度 , offsetParent
3			<div class="box3"> → 我没有宽高 
4				<p></p>   → 我没有定位
5			</div>
6		</div>
7	</div>
8	<div class="box1">
9		<div class="box2">
10			<div class="box3"> → 我没有宽高，有定位  , offsetParent
11				<p></p>   → 我没有定位
12			</div>
13		</div>
14	</div>

情形2：自己如果有定位属性
那么自己的offsetParent就是自己祖先元素中离自己最近的有定位的元素。

数值就是自己的左外边框到offsetParent对象的左内边框的值。

总结：

	IE6、7	IE8	IE9、IE9+、高级浏览器
offsetParent	如果自己没有定位，那么就是自己父亲中有width或者有height或者有定位的元素.	和高级浏览器一致	自己祖先元素中，离自己最近的已经定位的元素
offsetLeft	和高级浏览器一致	多算一条border	自己的border外到offsetParet对象的border内

offsetWidth和offsetHeight

全线兼容，是自己的属性，和别的盒子无关。
offsetWidth：width+padding+border
offsetHeight：height+padding+border

如果盒子没有宽度，那么所有浏览器都将把px值当做offsetWidth，而不是100%；
如果盒子没有高度，用文字撑的，所有浏览器都将把px值当做offsetHeight

clientWidth和clientHeight

clientWidth：width+padding
相当于比offsetWidth少了border
如果盒子没有宽度，那么那么所有浏览器都将把px值当做clientWidth，而不是100%
如果盒子没有高度，用文字撑的，IE6 clientHeight是0，其他浏览器都是数值。