今天说一下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等等的元素本身的位置，可以做到很好的兼容性。