js获取元素的offsettop,offsetleft等属性
obj.clientwidth //获取元素的宽度
obj.clientheight //元素的高度
obj.offsetleft //元素相对于父元素的left
obj.offsettop //元素相对于父元素的top
obj.offsetwidth //元素的宽度
obj.offsetheight //元素的高度
区别：
clientwidth = width + padding
clientheight = height + padding
offsetwidth = width + padding + border
offsetheight = width + padding + border
offset比client多了border的宽度
?123456789101112 //获取元素的纵坐标（相对于窗口） function gettop(e){ var offset=e.offsettop; if(e.offsetparent!=null) offset+=gettop(e.offsetparent); return offset; } //获取元素的横坐标（相对于窗口） function getleft(e){ var offset=e.offsetleft; if(e.offsetparent!=null) offset+=getleft(e.offsetparent); return offset; }
之前也写过一篇js关于获取元素位置的文章：js获取元素的offsettop,offsetleft等属性，我们可以通过offsettop和offsetleft属性获取元素相对窗口的位置，但offsettop和offsetleft属性都是相对于父元素定位的，而通常需要获取位置的元素都不是在最外层，所以遍历上级元素的offset相关属性少不了。那效率就成问题了。
?123456789101112 //获取元素的纵坐标（相对于窗口） function gettop(e){ var offset=e.offsettop; if(e.offsetparent!=null) offset+=gettop(e.offsetparent); return offset; } //获取元素的横坐标（相对于窗口） function getleft(e){ var offset=e.offsetleft; if(e.offsetparent!=null) offset+=getleft(e.offsetparent); return offset; }
好在浏览器给我提供了相应的接口getboundingclientrect，这个方法最早出现在ie浏览器中，后来的浏览器也跟着支持了这个方法，而且还更加完善，ie中只能获取到元素的left,top,bottom,right的属性，而后面的现代浏览器还能获取到元素的width和
chrome firefox (gecko) internet explorer opera safari
1.0 3.0 (1.9) 4.0 (yes) 4.0
这里要注意的是，bottom是元素底部相对于窗口顶部的距离，而不是像css里面position的bottom相对于窗口底部，同理，rihgt属性是元素最右边相对于窗口左边的距离。
?12345678 var box = document.getelementbyid(box); var pos = box.getboundingclientrect(); box.innerhtml = top:+pos.top + left:+pos.left + bottom:+pos.bottom + right:+pos.right + width:+pos.width + height:+pos.height
