使用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

转载于:https://www.cnblogs.com/1175429393wljblog/p/4588257.html

获取html上元素的真正坐标相关推荐

  1. 实现图片中文的识别和获取图片上文字的坐标(java实现)

    实现图片中文的识别和获取图片上文字的坐标(java实现)            现在利用python来进行图片的文字识别较为普遍,但是如果我们利用常用的家庭电脑来识别,需要的时间比较长,达到20~30 ...

  2. java获取屏幕上某坐标点的颜色

    全栈工程师开发手册 (作者:栾鹏) java教程全解 java获取屏幕上某坐标点的颜色.通过先获取屏幕截图,再获取坐标点颜色. public Color getScreenPixel(int x, i ...

  3. c#获取屏幕上某坐标点的颜色

    全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#获取屏幕上某坐标点的颜色 using System.Runtime.InteropServices;private struct POINT {p ...

  4. UG\NX二次开发 获取曲线上某个位置的点坐标、切线矢量、主法线矢量、副法线矢量 UF_MODL_ask_curve_props

    文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: UG\NX二次开发 获取曲线上某个位置的点坐标.切线矢量.主法线矢量.副法线矢量 U ...

  5. js 兼容性封装获取第一个子元素,最后一个子元素,下一个兄弟元素,上一个兄弟元素

    高级浏览器: chrome firefox ie9及以上符合web标准浏览器. 低版本浏览器: ie6,ie7,ie8. 节点和元素的适用范围:以firstChild和firstElementChil ...

  6. 软件项目技术点(4)——实现点击画布上元素

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 元素和影子 我们在主画布上绘制所有添加到画布上的元素,主画布上的所有元素存储在commonElements中. 在hitCanvas上 ...

  7. WPF 使用 TranslatePoint 换算元素之间相对坐标

    在 WPF 中的布局模型里面,可以将每个元素都认为是矩形.而每个矩形都可以将自己的左上角作为原点建立坐标,不同的矩形之间的坐标原点不相同,当这些用矩形表达的元素进行系列的旋转和平移等之后,如何将以某个 ...

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

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <divid="par_div"><aid="href_fir&qu ...

  9. iOS获取UIView上某点的颜色值

    项目需求中遇到获取UIView上某个坐标点的RGB颜色值的需求,现在把自己找到的解决方案简单总结记录一下,遇到了下面的情况: 不可移动的UIView 旋转式的UIView 滑条式的UIView 不可移 ...

  10. css获取到指定元素的宽度,在回调返回宽度值

    <script type="text/javascript">//获取到指定元素的宽度,在回调返回宽度值//通过处理这个value,重新设置新的宽度$('.sixth' ...

最新文章

  1. R语言使用magick包的image_border函数和image_background函数自定义图像的边界和背景(Change image border and background)
  2. 鸡年除夕全天微信红包收发量达142亿个增长75.7%
  3. Login rule 权限规则设置自动跳转页面
  4. git clone 代码下载速度慢的解决方法
  5. 算法 - 堆排序(C#)
  6. HTML5+CSS学习心得
  7. 数字语音信号处理学习笔记——语音信号的短时时域分析(1)
  8. 又见链表 --- 另一种Creat方式与反转
  9. 【HDU - 4056】Draw a Mess (并查集 or 线段树)
  10. 【JAVA SE】第三章 运算符、条件语句、switch结构、while循环、do…while循环、for循环、break关键字以及break和continue关键字
  11. 关于流(文件)的输入,输出与调用(fprintf,fscanf)
  12. python微控制器编程从零开始 pdf_Python微控制器编程从零开始
  13. 关于int型最大值最小值的思考
  14. 视频号怎么吸引眼球,视频号内容如何吸引用户观看:国仁网络资讯
  15. 手机andriod 开发---android test的执行
  16. 51单片机c语言dac0832产生波形,单片机DAC0832波形发生器实验报告
  17. 蓝牙基础知识进阶——Link Manager通用规则介绍
  18. opencv读取透明图片
  19. 习题4-5 换硬币 (20分)
  20. FreeMarkerBase

热门文章

  1. android适配各种分辨率的问题
  2. RDD DataFrame DataSet 区别和转换
  3. 开启mysql远程连接
  4. 有赞大裁员:裁员会超过1500人,加盟4年半的百度副总裁也已离职
  5. 为什么要在2021年放弃Jenkins?我已经对他失去耐心了...
  6. 谷歌开源的代码评审规范,值得借鉴!
  7. 厉害,96秒100亿,阿里双十一到底做了什么杠过亿级流量??
  8. 海外硕士苏明哲回国后哀叹:我美本英硕,找不到工作很难受
  9. 百度十年,我从技术走到管理
  10. 5个相见恨晚的Linux命令