<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>取元素的绝对坐标</title>
<style type="text/css">
*{border:0;margin:0; padding:0;}
</style>
</head>
<body>
<div id="div1" style=" background-color:red; width:100px; position:absolute; left:100px; top:100px; height:100px; border:1px black solid">我是div1
<div id="div2" style=" height:50px; width:50px; background-color:yellow; position:absolute; left:50px; top:0">我是div2</div>
</div>
<script type="text/javascript">
var div1=document.getElementById('div1');
var obj=getPos(div1);
alert("div1的绝对纵坐标为："+obj.top); //弹出100
alert("div1的绝对横坐标为："+obj.left); //弹出100
var div2=document.getElementById('div2');
var obj1=getPos2(div2);
alert("div2的绝对纵坐标为："+obj1.top); //弹出100
alert("div2的绝对横坐标为："+obj1.left); //弹出150
//用for循环
function getPos(ele){
var obj={};
var top=ele.offsetTop;
var left=ele.offsetLeft;
var offsetEle=ele.offsetParent;
for(;offsetEle;){
top+=offsetEle.offsetTop;
left+=offsetEle.offsetLeft;
offsetEle=offsetEle.offsetParent;
}
obj.top=top;
obj.left=left;
return obj;
}
//用while循环
function getPos2(ele){
var obj={};
var top=ele.offsetTop;
var left=ele.offsetLeft;
var offsetEle=ele.offsetParent;
while(offsetEle){
top+=offsetEle.offsetTop;
left+=offsetEle.offsetLeft;
offsetEle=offsetEle.offsetParent;
}
obj.top=top;
obj.left=left;
return obj;
}
</script>
</body>
</html>
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
