JavaScript的DOM操作获取元素周边大小
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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>。