您的位置：首页 > Web前端 > CSS

获取盒子的实际位置

2016-04-25 23:33 369 查看

在元素的定位中经常出错，学习了一段时间，今天来总结一下其中遇到的一些问题

其中obj.offsetLeft指的是一个元素的计算后的位置==盒模型的尺寸：

1.offsetWidth=css宽+padding+border

2.offsetLeft/offsetTop
到定位父级的距离

3.document.documentElement.clientWidth/clientHeight 窗口的可视化宽高

4.document.documentElement.scrollTop(ie ff) 或 document.body.scrollTop(chrome)窗口的滚动距离

5.window.onresize 窗口大小改变

6.window.onscroll 窗口滚动事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ padding:10px;}
#div1{ background:red; padding:110px;position:relative;}
#div2{ background:green; padding:70px;padding-top:10px;position:relative;}
#div3{ background:blue; padding:20px;}
</style>
<script>
window.onload=function(){
var oDiv3=document.getElementById('div3');
//oDiv3.offsetLeft+oDiv2.offsetLeft+oDiv1.offsetLeft
//变量累加
//找定位父级，把他变成自己
alert(getPos(oDiv3).left);
alert(getPos(oDiv3).top);
alert(oDiv3.offsetLeft)
function getPos(obj){
var l=t=0;
while(obj){
//for(;obj;){
//找累加 l
l+=obj.offsetLeft; //取到定位父级的距离
t+=obj.offsetTop; //取到定位父级的距离
obj=obj.offsetParent; //把obj的定位父级变成obj
}
return {left:l,top:t};
}
};
</script>
</head>
<body id="bd">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
其中div3的padding是20px，div2的padding是70px，div1的padding是110px，body的padding是10px;如果要算出div3相对于窗口左边的距离是多少，用现有的方法是div3.offsetLeft+div2.offsetLeft+div1.offsetLeft其值应该是70px+110px+10px=190px；然而可以用函数直接求出来。思路是求出div3到定位父级的距离，然后取定位父级到其定位父级的距离，以此轮推累加下去取到的就是其到浏览器窗口的距离：
首先要先定义l=t=0;然后可以取其到定位父级的距离，然后赋值给自己，然后再取其本身到定位父级的距离l+=obj.offsetLeft或t+=obj.offsetTop，再把定位父级赋值给自己obj=obj.offsetParent,一直到最后，然后返回l和t就是div到浏览器窗口的距离。

1.如果要获取浏览器滚动条滚动的距离document.documentElement.scrollTop(ie ff) 这个是对IE和ff浏览器的，document.body.scrollTop(chrome)这个是对于chrome浏览器的。

2.如果获取浏览器当前窗口的大小就要使用document.documentElement.clientWidth/clientHeight 窗口可视化宽高

3.window.onresize 浏览器窗口大小改变时触发的事件

4.window.onscroll浏览器滚动条滚动时触发的事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 盒模型 css

相关文章推荐

新的分享

章节导航