在元素的定位中经常出错，学习了一段时间，今天来总结一下其中遇到的一些问题
其中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.οnlοad=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>
首先要先定义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浏览器滚动条滚动时触发的事件
6610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
