JavaScript的DOM_获取元素周边大小
一、clientLeft 和 clientTop
这组属性可以获取元素设置了左边框和上边框的大小，目前只提供了 Left 和 Top 这组，并没有提供 Right 和 Bottom。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.clientLeft); alert(box.clientTop); } </script> <style type="text/css"> .aaa{ background:#ccc; width:200px; height:200px; border:10px solid red; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
二、offsetLeft 和 offsetTop
1、这组属性可以获取当前元素相对于父元素的位置。
获取元素当前相对于父元素的位置，最好将它设置为定位 position:absolute；不要用外边距，否则不同的浏览器会有不同的解释。
加上边框和内边距不会影响它的位置，但加上外边据会累加。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.offsetLeft); //50 alert(box.offsetTop);//50 } </script> <style type="text/css"> /* body{ margin:50px; } */ .aaa{ background:#ccc; width:200px; height:200px; position:absolute; top:50px; left:50px; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
2、得到父元素
offsetParent 中，如果本身父元素是<body>，非 IE6,7,8 返回 body 对象，IE 6,7,8返回 html 对象。
如果两个元素嵌套，如果上父元素没有使用定位 position:absolute，那么 offsetParent 将返回 body 对象或 html 对象。
所以，在获取 offsetLeft 和 offsetTop 时候，CSS 定位很重要。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.offsetParent); //得到父元素，IE6,7,8得到的是HTML跟标签，其他得到的是body标签 } </script> <style type="text/css"> </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.offsetParent);//父元素是id为pox的那个div，如果没加定位就变成body了 alert(box.offsetTop);//20 alert(box.offsetParent.offsetTop);//50 } </script> <style type="text/css"> #box{ background:#ccc; width:200px; height:200px; margin:20px; } #pox{ position:absolute; top:50px; left:50px; background:blue; width:400px; height:400px; } </style> </head> <body> <div id="pox"> <div id="box" class="aaa">测试Div</div> </div> </body>
如果多层的话，就必须使用循环或递归。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.offsetParent);//父元素是id为pox的那个div，如果没加定位就变成body了 alert(offsetLeft(box)+offsetLeft(box.offsetParent));//20 alert(box.offsetParent.offsetTop);//50 } function offsetLeft(element) { var left = element.offsetLeft; //得到第一层距离 var parent = element.offsetParent; //得到第一个父元素 while (parent !== null) { //如果还有上一层父元素left += parent.offsetLeft; //把本层的距离累加 parent = parent.offsetParent; //得到本层的父元素 } //然后继续循环 return left; } </script> <style type="text/css"> #box{ background:#ccc; width:200px; height:200px; margin:20px; } #pox{ position:absolute; top:50px; left:50px; background:blue; width:400px; height:400px; } </style> </head> <body> <div id="pox"> <div id="box" class="aaa">测试Div</div> </div> </body>
三、scrollTop 和 scrollLeft
这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。意思就是获取滚动条的位置（有滚动条的前提下）
box.scrollTop; //获取滚动内容上方的位置 box.scrollLeft; //获取滚动内容左方的位置
如果要让滚动条滚动到最初始的位置，那么可以写一个函数：
function scrollStart(element) { if (element.scrollTop != 0) element.scrollTop = 0; }
四、getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和 bottom。分别表示元素各边与页面上边和左边的距离。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.getBoundingClientRect().top); //元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); //元素右边距离页面左边的距离 alert(box.getBoundingClientRect().bottom); //元素下边距离页面上边的距离 alert(box.getBoundingClientRect().left); //元素左边距离页面左边的距离 } </script> <style type="text/css"> #box{ background:#ccc; width:200px; height:200px; position:absolute; top:50px; left:50px; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
IE、Firefox3+、Opera9.5、Chrome、Safari 支持，在 IE 6,7,8中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，需要做个兼容。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(document.documentElement.clientTop); //IE6,7,8 为 2其他为0 alert(document.documentElement.clientLeft); //IE6,7,8 为2其他为0 alert(getRect(box).top); //元素上边距离页面上边的距离 alert(getRect(box).right); //元素右边距离页面左边的距离 alert(getRect(box).bottom); //元素下边距离页面上边的距离 alert(getRect(box).left); //元素左边距离页面左边的距离 } function getRect(element) { var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left = document.documentElement.clientLeft; return { top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left } } </script> <style type="text/css"> #box{ background:#ccc; width:200px; height:200px; position:absolute; top:50px; left:50px; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>