html中获取对象绝对位置

最新推荐文章于 2022-09-30 10:42:10 发布

hmlong114

最新推荐文章于 2022-09-30 10:42:10 发布

阅读量364

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/hmlong114/article/details/83674031

版权

<html>

<script language="javascript">
function findPosX(obj) {
var curleft = 0;

if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body
while (obj.offsetParent) {//遍历所有父类元素
curleft += obj.offsetLeft;//当前元素的左边距
obj = obj.offsetParent;
}
} else if (obj.x) curleft += obj.x;
return curleft;
}

function findPosY(obj) {
var curtop = 0;

if (obj.offsetParent) {
while (obj.offsetParent) {

curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y) curtop += obj.y;
return curtop;
}
function getPos(id){
return {x:findPosX(document.getElementById(id)),y:findPosY(document.getElementById(id))};
}

function showPos(id){
var pos = getPos(id);
alert("x=="+pos.x+"y=="+pos.y);

}
</script>

<div id="parentdiv" style="position:relative; border:5px solid;" >
<table style="position: relative; " width="185" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe frameborder=0 scrolling=no width="185" height="170" marginHeight=0 marginWidth=0 align="left"
src='#'></iframe>
</td>
<td id="test1" onClick="javascript:showPos('test1');">测试获得坐标</td>
<td id="test2" onClick="javascript:showPos('test2');">测试获得坐标</td>
<td id="test3" onClick="javascript:showPos('test3');">测试获得坐标</td>
<td id="test4" onClick="javascript:showPos('test4');">测试获得坐标</td>
<td id="test5" onClick="javascript:showPos('test5');">测试获得坐标</td>

</tr>
</table>

</div>
</html>

hmlong114

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中获取对象绝对位置

function findPosX(obj) {var curleft = 0;if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body while (obj.offsetParent) {//遍历所有父类元素 curleft += obj.offsetLeft;//当前元素的左边距 obj =...
复制链接

扫一扫