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的返回值了。

这是 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等等的元素本身的位置，可以做到很好的兼容性。