打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JavaScript获取网页元素的绝对坐标

<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  

 



本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
如何取得任何 HTML 標籤右上角的位置
JSP+Ajax 添加、删除多选框
javascript – 为什么jquery position()方法没有setter版本
js實例教程-javascript判斷一個字符串或者數組裡面出現最多的元素及其出現的次數(代碼實例)
如何动态显示div ? 更改div内容 - .NET - 提供最全面实用的Java面试题,...
盘点JavaScript中那些进阶操作知识(下篇)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服