获取Dom元素的X/Y坐标
作者:zhusun 来源:Koubei UED 时间:2009-10-10 12:49:00
现在Web页面的交互方式越来越多样化,其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决,一个是事件的注册方式,一般处理拖放元素的事件顺序是:捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件;另一个问题就是拖放元素的位置,即X/Y坐标。这里我主要来讲述后面的问题:如何获取一个Dom元素的坐标。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法,我们可以直接使用,而这里我更多的是希望透过这些方法,看到原始的获取坐标方式以及如何处理跨浏览器问题。
首先认识一下getBoundingClientRect方法,标准语法为:
oRect = object.getBoundingClientRect();
Dom节点调用该方法可返回一个ClientRect类型的对象,该对象有四个属性值:top、left、right、bottom,表示了该节点相对于可视浏览器可视区域的左上角位置的坐标,看图就能好理解
坐标说明图1
补充一下,如果当前的元素已经超出可视区域,依然按照可视区域的左上角位置的坐标来计算,如图2
坐标说明图2
这样就可以简单的获取Dom元素在可视区里的X/Y坐标(通过left和top属性)。最后在计算上页面滚动条的偏移量就可以计算出元素在整个页面中的X/Y坐标了。页面滚动偏移量的计算在不同浏览器下有所不同,不过我们可以借鉴YUI里面方法,设计一个通用的方式:
scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
在W3C标准下document.body.scrollTop和document.body.scrollLeft都为0,所以采用了上面兼容的方式获取页面滚动条的偏移量。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
JS表格排序新法
MySQL最常见的操作语句小结
Mysql基础知识点汇总
科讯CMS编辑器会自动更改代码
![](https://img.aspxhome.com/file/UploadPic/200812/12/kesion-editer-90s.jpg)
python中pd.Series()函数的使用
![](https://img.aspxhome.com/file/2023/3/134993_0s.png)
python爬取网易云音乐评论
mysql socket文件作用详解
MySQL MEM_ROOT详解及实例代码
![](https://img.aspxhome.com/file/2023/9/71099_0s.jpg)
关闭窗口时保存数据的办法
Python去除字符串前后空格的几种方法
python实现批量获取指定文件夹下的所有文件的厂商信息
Golang 空map和未初始化map的注意事项说明
![](https://img.aspxhome.com/file/2023/1/134131_0s.png)
Python同时处理多个异常的方法
十个简单好用的设计技巧[译]
![](https://img.aspxhome.com/file/UploadPic/20094/8/01-13s.jpg)
SQL常用的四个排序函数梳理
![](https://img.aspxhome.com/file/2023/6/124836_0s.png)
Python np.where()的详解以及代码应用
如何用Sleep函数编译一个定时组件?
Python实现五子棋人机对战 和人人对战
再谈Python中的字符串与字符编码(推荐)
![](https://img.aspxhome.com/file/2023/5/81445_0s.png)