1. offsetLeft[Top]
当前元素到定位父级(即offsetParent)的距离(偏移值 )。
父级没有定位:
offsetParent -> body
offsetLeft[Top] -> html
父级有定位:
ie 7:
如果自己没有定位,那么offsetLeft[Top]是到body的距离。
如果自己有定位,那么就是到定位父级的距离。
其他:
到定位父级的距离。
2.元素宽高
元素.style.width : 样式宽,带单位;
元素.clientWidth : 可视区宽(样式宽 + padding),不带单位;
元素.offsetWidth : 占位宽(可视区宽 + border),不带单位;
高与宽类似,将width 替换为 height即可。
3.获取元素位置的函数
<!DOCTYPE html> <html> <head> <title>获取元素的位置</title> <meta charset="utf-8"> <style type="text/css"> div{padding:30px 40px;} #div1{border:2px dashed red;} #div2{border:2px dashed green;} #div3{border:2px dashed blue;} </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> <script type="text/javascript"> var oDiv3 = document.getElementById('div3'); var p = getPos(oDiv3); function getPos(obj){ var pos={"left":0,"top":0}; while(obj){ pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; } alert(p.left); //弹出92 alert(p.top); //弹出72 </script> </body> </html>