js获取元素位置和style的兼容性写法

js获取元素位置和style的兼容性写法
今天说⼀下js获取元素位置和style的⽅法。

当然不只是element.style那么简单。

主⾓：getBoundingClientRect,getClientRects，getComputedStyle，currentStyle
配⾓：getPropertyValue，getAttribute
getBoundingClientRect：
这个⽅法返回⼀个矩形对象，包含六个属性：left、top、width、height、right和bottom（ie下没有width和height）。

分别表⽰元素各边与页⾯上边和左边的距离。

var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页⾯上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页⾯左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页⾯上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页⾯左边的距离
注意：这⾥的getBoundingClientRect()的bottom和right和css中的不⼀样。

bottom是元素下边到页⾯上边的距离，right是元素右到页⾯左的距离。

通常这个⽅法⽤于获得页⾯中某个元素的左，上，右和下分别相对浏览器视窗的位置。

getBoundingClientRect()最先是IE的私有属性，现在已经是⼀个W3C标准。

所以你不⽤当⼼浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，不够可以通过以下⽅法来获取width,height的值：
var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top;
兼容所有浏览器写法：
var ro = object.getBoundingClientRect();
var Top = ro.top;
var Bottom = ro.bottom;
var Left = ro.left;
var Right = ro.right;
var Width = ro.width||Right - Left;
var Height = ro.height||Bottom - Top;
有了这个⽅法，获取页⾯元素的位置就简单多了: 这样就可以兼容所有浏览器了。

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
getClientRects：
兼容性⽅⾯：除了safari，firefox2.0外所有浏览器都⽀持getClientRects和getBoundingClientRect
他俩其实差不多，返回的有点差别：
getClientRects 返回⼀个TextRectangle集合，就是TextRectangleList对象。

getBoundingClientRect 返回⼀个TextRectangle对象，即使DOM⾥没有⽂本也能返回TextRectangle对象.
也就是说getClientRects返回值需要加⼀个[0]就是getBoundingClientRect的返回值了。

这是width: 200px;height: 300px;margin: 40px;的⼀个div的样式。

第⼀个是getClientRects的返回，第⼆个是getBoundingClientRect的返
回。

getComputedStyle：
getComputedStyle是⼀个可以获取当前元素所有最终使⽤的CSS属性值。

返回的是⼀个CSS样式声明对象([object CSSStyleDeclaration])，只读。

他强⼤的地⽅是可以取到元素的伪类。

var dom = document.getElementById("test"),
style = window.getComputedStyle(dom , ":after");
这不就跟dom.style是⼀样的吗？还是有差别的：
⽐如getComputedStyle只读不可写。

主要区别是getComputedStyle取的是最终应⽤在元素上的所有CSS属性对象。

⽽style只能获取元
素style属性中的CSS样式，也就是该标签⾥⾯写的内嵌样式，别的样式是取不到的。

就是说getComputedStyle把这个元素所有属性都取出来了，包含属性的值。

取了⼀下，⼤概⼏百个......但是你取元素的syle属性，就会看到⼀堆的属性名加空字符串，因为它还没有设置样式。

相信我不说你也知道这是什么。

但是getComputedStyle⽀持ie9-。

但是ie⼜给出了它⾃⼰的实现---currentStyle
currentStyle：
与getComputedStyle基本⼀致，不过currentStyle不⽀持伪类。

⽐如，我们获取元素的⾼度可以这么写。

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
但是这个东西和getComputedStyle还是有⼀定差异的，⽐如FireFox浏览器下是cssFloat，⽽IE9浏览器下则是cssFloat和styleFloat都有。

等等。

getPropertyValue：
getPropertyValue⽅法可以获取CSS样式申明对象上的属性值（直接属性名称），例如
window.getComputedStyle(element, null).getPropertyValue("float");
其实他和直接访问⼀样的，但是它不⽤写驼峰呀，⽽且主要是不⽤写cssFloat与styleFloat。

getAttribute：
getAttribute基本同上，但是它得写驼峰。

style.getAttribute("backgroundColor");
最后是jquery的css()不解释，万能。

除了⼀点，他不能获取伪类。

最后补充⼀下元素的位置样式。

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border //offset⽐client多了border的宽度
在项⽬中，可以⽤getBoundingClientRect来获取元素的width等信息，getComputedStyle获取元素的margin等位置信息，然后可以加上元素的clientWidth等等的元素本⾝的位置，可以做到很好的兼容性。