获取元素在文档上的正确坐标

　　如何获取元素在页面上的正确坐标呢，我想很多人都会想到 elem.getBoundingClientRect 和 window.scrollTop / window.scrollLeft 的求和，实际上这种方法在大部分情况下的确是正确的，但是在 ie6 ie7 中却并不正确， top 和 left 会比实际的值各多出 2px。

　　这个2px 并不是 html 和 body 的默认 border 造成的，这是浏览器的容器边框宽度。

　　就是下图中红框部分

　　这个值如何去获得呢?

　　先在 css reset 中加入 html{ margin: 0} /* 兼容各浏览器的 html margin 呈现不统一 */

　　然后，可以使用 (document.documentElement || document.getElementsByTagName('html')[0]).getBoundingClientRect() 去获得

　　不过, 经过测试，代码在 ie 67 下可以获得 2 这个值， ie6 为 0, ie7 为2, 而 ie 8 却是 -2，其他浏览器均为 0

　　看来 ms 在 ie7除了 html 外加上 2，在ie8 的时候 getBoundingClientRect 函数是通过内置 -2 的值的方式来修复的，而 ie9 才真正修复了

　　因此，这里还需要对该函数做 ie8 的兼容，加上部分其他问题的兼容，于是有了以下代码

//元素在文档上的坐标 v0.4 Alucelx
//http://www.cnblogs.com/Alucelx/archive/2011/12/11/2284082.html
function pageXY(elem){var rect = elem.getBoundingClientRect();var scrollTop = window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;var scrollLeft = window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0;var html = document.documentElement || document.getElementsByTagName('html')[0];//修复ie 7 下的浏览器边框也被算在 boundingClientRect 内的 bugvar deviation = html.getBoundingClientRect();//修复 ie8 返回 -2 的 bugdeviation = { //FF 不允许修改返回的对象left:   deviation.left < 0 ? 0 : deviation.left,top: deviation.top < 0 ? 0 : deviation.top};return {left: rect.left + scrollLeft - deviation.left,top:   rect.top + scrollTop - deviation.top};
}

使用时，传入要查询的元素即可返回正确的位置

转载于:https://www.cnblogs.com/Alucelx/archive/2011/12/11/2284082.html

获取元素在文档上的正确坐标相关推荐

jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接原创 201 ...
开启MongoDB更新文档操作的正确姿势
将文档存入数据库中之后,可以使用以下几种更新方法之一对其进行更改:updateOne.updateMany 和 replaceOne.updateOne 和 updateMany 都将筛选文档作为第一 ...
SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...
quill光标位置插入html，quill编辑器+word文档上传，插入指定位置
官方quill没有直接给出插入html的方式类似,下面两个方法,是quill框架提供的,但是并没有提供可以在指定光标位置插入html quill.pasteHTML:这个方法已经废弃了,但目前还是可 ...
建议：为所有导出的API元素编写文档注释。
如果要想使一个API真正可用,就必须为其编写文档.传统意义上的API文档是手工生成的,所以保持文档与代码同步是一件很繁琐的事情.Java语言环境提供了一种被称为Javadoc的实用工具,从而使这项任务 ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
坐标定位手机元素_CSS 是如何影响浏览器元素在文档中的排列？
之前在项目的过程中遇到了一个问题,某个 div 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下 CSS 相关资料,解决了这个问 ...
CSS 如何影响浏览器元素在文档中的排列？
作者 | SHERlocked93责编 | 胡巍巍之前在项目的过程中遇到了一个问题,某个 div 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什 ...
代码中如何让无序标记的内容并排_英语技术文档中如何正确使用无序列表和有序列表？...
Foreword 之前跟大家分享过英语技术文档中如何正确使用时态和英语技术文档中如何正确使用人称,这一篇再跟大家分享一下如何正确使用无序列表和有序列表. 其实,在技术文档中,除了无序列表和有序列表,另 ...

获取元素在文档上的正确坐标

获取元素在文档上的正确坐标相关推荐

最新文章

热门文章