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

取HTML元素坐标的函数

2007-04-25 14:25 197 查看



代码如下:
<!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>
<title>取HTML元素坐标的函数</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<table>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td id="td">ee</td>
</tr>
<tr>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td>ii</td>
<td>jj</td>
</tr>
</table>
<script type="text/javascript">
<!--
function GetElCoordinate(e) //获取Element的坐标
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while (e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
return {
top: t,
left: l,
width: w,
height: h,
bottom: t + h,
right: l + w
}
}
function GetAbsPoint(e)
{
var oRect = e.getBoundingClientRect();
return {
top: oRect.top,
left: oRect.left,
width: e.offsetWidth,
height: e.offsetHeight,
bottom: oRect.bottom,
right: oRect.right
}
}
var o = GetElCoordinate(document.getElementById("td"));
var p = GetAbsPoint(document.getElementById("td"));
alert("top: " + o.top + ", left: " + o.left + ", width: " + o.width + ", height: " + o.height + ", bottom: " + o.bottom + ", right: " + o.right + "/n" + "top: " + p.top + ", left: " + p.left + ", width: " + p.width + ", height: " + p.height + ", bottom: " + p.bottom + ", right: " + p.right);
//-->
</script>
</body>
</html>

[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html generator function xhtml table
相关文章推荐
新的分享
章节导航