博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript获取元素在浏览器画布中的绝对位置【转】
阅读量:6272 次
发布时间:2019-06-22

本文共 676 字,大约阅读时间需要 2 分钟。

hot3.png

avaScript中提供获取HTML元素位置的属性: 

HTMLElement.offsetLeft 
HTMLElement.offsetHeight 
但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(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,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。

 

 

转载于:https://my.oschina.net/u/555639/blog/226930

你可能感兴趣的文章
让人抓头的Java并发(一) 轻松认识多线程
查看>>
从源码剖析useState的执行过程
查看>>
地包天如何矫正?
查看>>
中间件
查看>>
Android SharedPreferences
查看>>
算法与数据结构1800题 图
查看>>
css面试题
查看>>
Vue组建通信
查看>>
用CSS画一个带阴影的三角形
查看>>
前端Vue:函数式组件
查看>>
程鑫峰:1.26特朗.普力挺美元力挽狂澜,伦敦金行情分析
查看>>
safari下video标签无法播放视频的问题
查看>>
浅析DNS解析过程
查看>>
使用prometheus + grafana + pushgateway搭建监控可视化系统
查看>>
计算机网络不完全整理(上)--春招实习
查看>>
01 iOS中UISearchBar 如何更改背景颜色,如何去掉两条黑线
查看>>
对象的继承及对象相关内容探究
查看>>
Spring: IOC容器的实现
查看>>
把你的devtools从webpack里删除
查看>>
Git 常用操作和流程
查看>>