获取html上元素的真正坐标

使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性,都不能获得元素的真正位置与大小,这些属性取出来的都是原来的设置值,例如<table id="table1" width="500">,那么通过document.getElementByIdx_x("table1").width取出来的值永远都是500,而不管这个表格是否已经被撑大了;同时,通过document.getElementByIdx_x("table1").style.left获得的值是空的,因为没有设置这个值。
要取得HTML元素的真正位置与大小,只能通过
offsetLeft,offsetTop,clientWidth,clientHeight,offsetWidth,offsetHeight属性,其中offsetLeft与offsetTop分别是当前元素在父元素内的相对左坐标与相对顶坐标,要取得绝对坐标,还需要用到
offsetParent属性,改属性取得当前元素的父元素。要取得绝对坐标,就必须依次获得父元素的相对坐标,直到父元素为空,然后把所有相对坐标加起来,得到当前元素的绝对坐标。
最常见的是日期选择框,当点击按钮时弹出日期选择框总是在按钮的旁边,这个选择框的坐标,就是根据按钮的坐标以及按钮的offsetWidth,offsetHeight来取得的。

-----------------------------------------------------------------------------------------------------------------------------
HTMLElement.offsetLeft
HTMLElement.offsetTop
但是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,前一阵找到的一个比较好的函数,分享一下:
//获取元素的纵坐标
function
getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null)
offset+=getTop(e.offsetParent);
return
offset;
}
//获取元素的横坐标
function
getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null)
offset+=getLeft(e.offsetParent);
return
offset;
}
其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。

------------------------------------------------------------------------------------------------------------------------

<script
type="text/javascript">
<!--
function
GetElCoordinate(e)
{
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
}
}

var o
=
GetElCoordinate(document.getElementByIdx_x("text-div"));

document.getElementByIdx_x("test-div").style.left
= parseInt(o.left)+"px";
document.getElementByIdx_x("test-div").style.top =
parseInt(o.bottom)+"px";
//-->
</script>

http://www.blogjava.net/sealyu/archive/2009/02/24/256449.html

时间: 2024-09-30 21:58:01

获取html上元素的真正坐标的相关文章

获取第上一个兄弟元素 屏蔽浏览器的差异(PreviousElementSibling)

//获取element上一个兄弟元素 function getPreviousElementSibling(element){ //能力检测 判断是否支持PreviousElementSibling if(element.previousElementSibling){ return element.previousElementSibling; }else{ //获取上一个兄弟节点 var node = element.previousSibling; //如果没有上一个节点,此时null w

百度地图的使用之获取数据库表中信息的坐标点显示在地图上

//通用封装好的js: var map = new BMap.Map("container"); //建树Map实例 var point = new BMap.Point(103.976032, 33.845509); // 建树点坐标 map.centerAndZoom(point, 6); // 初始化地图,设置中心点坐标和地图级别. //地图事件设置函数: map.enableDragging(); //启用地图拖拽事件,默认启用(可不写) map.enableScrollWhe

js及jquery获取页面和元素的宽高

js: 网页可见区域宽: document.body.clientWidth;(不含滚动条) 网页可见区域高: document.body.clientHeight;(不含滚动条) 网页可见区域宽: document.body.offsetWidth;(包括边线的宽); 网页可见区域高: document.body.offsetHeight;(包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHei

jQuery获取和操作元素的属性和CSS样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

使用jquery获取指定li元素后面的所有兄弟元素

使用jquery获取指定li元素后面的所有兄弟元素:如果我们已经获取了一个li元素,那么如何获取此li元素后面的所有的兄弟元素,下面就通过代码实例做一下简单介绍.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /&g

当从网页获取不到元素时,

1,可以分段解析 2, using Ivony.Html.Parser; using Ivony.Html; using Skay.WebBot; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using Newtonsoft.Json.Linq; using Ne

jQuery如何获取当前指定元素的标签名称

如何获取当前指定元素的标签名称:关于获取标签名称的在实际应用中不常见,或许您永远用不上,不过这里仅仅是介绍一种方法,感兴趣可以看一下,如果不感兴趣直接略过就可以了.代码实例如下: <script type="text/javascript"> $(document).ready(function(){ alert($("#testInput")[0].tagName); }) </script> </head> <body&

jquery选择器 之 获取父级元素、同级元素、子元素

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 href_fir href_sec href_thr href_fiv $(document).ready(function(){ $("a").parent().addClass('a_par'); }); firebug查看jquery parent效果 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素(注意是下一个同级元素哦) list item 1 list it