JS获取table中td的绝对坐标

最新推荐文章于 2023-02-07 10:22:46 发布

a4562834

最新推荐文章于 2023-02-07 10:22:46 发布

阅读量1w

点赞数

文章标签： table function border javascript scroll iframe

本文链接：https://blog.csdn.net/a4562834/article/details/7268389

版权

<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(){
return {x:findPosX(document.getElementById("p36table")),y:findPosY(document.getElementById("p36table"))};
}

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

}
</script>

<div id="parentdiv" style="position:relative; border:5px solid;" >
         <table id="p36table" 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 onClick="javascript:showPos();">测试获得坐标</td>
   </tr>
      </table>
   
   </div>   
</html>







附注：

方法1：

function   getAbsPoint(e)   
{   
    var   x   =   e.offsetLeft,   y   =   e.offsetTop;   
    while(e=e.offsetParent) 
    { 
       x   +=   e.offsetLeft;   
       y   +=   e.offsetTop;
    } 
    alert("x:"+x+","+"y:"+y);   
}

方法2：

function   getAbsPoint(obj)   
{   
   var   x,y;   
   oRect   =   obj.getBoundingClientRect();   
x=oRect.left   
y=oRect.top   
alert("("+x+","+y+")")   
}

JS中获得窗口属性的方法 

1。获得屏幕的分辨率： 
screen.width 
screen.height 

2。获得窗口大小： 
document.body.clientWidth 
document.body.clientHeight 

3。获得窗口大小（包含Border、Scroll等元素） 
document.body.offsetWidth 
document.body.offsetHeight