获取DOM节点位置-优快云博客

本文链接：https://blog.youkuaiyun.com/beyond1993/article/details/83911367


<!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>获取DOM节点位置</title>
<script type="text/javascript">
function pageX(elem) {//获取元素相对于整个文档的X位置的函数；
    var p = 0;
    while ( elem.offsetParent ) {
        p += elem.offsetLeft;
        elem = elem.offsetParent;
    }
    return p;
}
function pageY(elem){ //获取元素相对于整个文档的Y位置的函数；
    var p = 0;
    while ( elem.offsetParent ) {
        p += elem.offsetTop;
        elem = elem.offsetParent;
    }
    return p;
}
function getPos(id){
	var o = document.getElementById(id);
	var x = pageX(o);
	var y = pageY(o);
	alert("x:"+x+",y:"+y);
}
</script>
</head>
<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><input type="button" id="bt" onclick="getPos('bt')" value="获取节点位置" /></td>
  </tr>
</table>
</body>
</html>