js获取元素到文档区域document的(横向、纵向)坐标的两种方法

js获取元素到文档区域document的(横向、纵向)坐标的两种方法获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法:一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素。所以,要得到

大家好,又见面了,我是你们的朋友全栈君。

获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较
在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法:

一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现
在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素。所以,要得到元素到文档区域的坐标位置,只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止。
js代码

// 获取元素到文档区域的坐标
function getPosition(element) {
var actualLeft = element.offsetLeft,
actualTop = element.offsetTop,
current = element.offsetParent; // 取得元素的offsetParent
// 一直循环直到根元素
while (current !== null) {
actualLeft += current.offsetLeft;
actualTop += current.offsetTop;
current = current.offsetParent;
}
// 返回包含left、top坐标的对象
return {
left: actualLeft,
top: actualTop
};
}

例子截图

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

firebug下测试结果截图:(注:其他浏览器已通过测试!)

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

 

二:通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗window的位置。返回的是一个对象,该对象有四个属性:top,left,right,bottom;该方法原本是IE Only的,但是FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率有很大的提高。 另外,该方法避免使用while循环,而是直接获取数值来实现,比第一种方法性能要好,特别是在复杂的页面上更为明显。
js代码: 

// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document,
rec = element.getBoundingClientRect(),
_x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标
_y = rec.top;
// 与html或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
_x += dc.documentElement.scrollLeft || dc.body.scrollLeft;
_y += dc.documentElement.scrollTop || dc.body.scrollTop;
return {
left: _x,
top: _y
};
}

经测试,该方法与第一种方法获取元素相对于document的坐标大小相同,对于IE低版本浏览器,存在一些差异。

注意:记得要累加上html(IE除外)或body(针对IE)元素的水平或垂直滚动距离!
结语:上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述,如遇到相关问题,可联系本人或直接发表评论,另外,对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可,当然offsetWidth、offsetHeight属性会计算元素的内边距、边框,所以最好的办法还是通过getBoundingClientRect方法来获取。ps:补充一点,利用该方法返回对象的right-left = 元素宽度;bottom-top = 元素高度。可以获取不带边框的元素本身的宽度和高度。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161637.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • jsonp的实现原理_jsonp为什么要提供回调函数

    jsonp的实现原理_jsonp为什么要提供回调函数前几天看了动脑老师老宋讲的jsonp原理,觉得很受用,现做下笔记。什么是跨域:跨域是浏览器同源策略而产生的,在不同协议,不同端口,不同域名下(以上任意一个不同都算是跨域)的两个服务之间是无法互相访问的。举例:http://www.baidu.com/index.html调用http://www.baidu.com/server.php(非跨域)http

    2022年10月24日
  • SPSS 实现KMO和Bartlett的球形度检验[通俗易懂]

    SPSS 实现KMO和Bartlett的球形度检验[通俗易懂]第一步:选择“因子分析”导入数据后,按顺序选择就好:“分析”-“降维”-“因子”第二步:选择变量如果只有一个变量,选中之后,再点击一下中间向右边的那个箭头多个变量的话,比如,我这里选择x1-x8,就是选择x1变量后,按住shift键不放,再点击x8变量,就可以一下子选择8个变量。第三步:选择KMO和巴特利特球形度检验这里,先不要急着点“确定”,先选择“描述”,接着在“相关性矩阵”那里勾选“KMO和巴特利特球形度检验”输出结果KMO统计量值大于0.5,可以看出变量间的相关程度无太

  • random.nextInt()与Math.random()基础用法

    random.nextInt()与Math.random()基础用法1、来源java.util.Random类中的方法;Math类中的静态方法2、用法产生0-n的伪随机数(伪随机数参看最后注解)://两种生成对象方式:带种子和不带种子(两种方式的区别见注解)Randomrandom=newRandom();Integerres=random.nextInt(n);Integerres=(int)(Math.random()*n);3、

  • virsh命令详解_1个无法解析的外部命令

    virsh命令详解_1个无法解析的外部命令virsh的详细命令解析virsh有命令模式和交互模式如果直接在vrish后面添加参数是命令模式,如果直接写virsh,就会进入交互模式virshlist 列出所有的虚拟机,虚拟机的状态有(8)种 runing是运行状态 idel是空闲状态 pause暂停状态 shutdown关闭状态 crash虚拟机崩坏状态 daying垂死状态 shutoff不运行完全关闭 pmsuspe…

  • ubuntu安装wget命令_linux bash命令

    ubuntu安装wget命令_linux bash命令我们先安装linux系统比如centos7.1里面有的就没有wget下载工具。wget这个命令就不可以使用。我们使用yum-yinstallwgetyuminstallperl会出现:[root@localhost~]#yum-yinstallwgetLoadedplugins:fastestmirrorRepodataisoverweeksold.Instal…

    2022年10月16日
  • JavaScript下载本地文件

    JavaScript下载本地文件网上很多关于JS下载文件操作的代码,都过于繁杂,偶然找到这个方法,务必记录一下,太简单实用了/Template/MaterielDictionary.xlsx为文件相对路径,后边参数可不动。window.open(‘/Template/MaterielDictionary.xlsx’,’newwindow’,’height=100,width=400,top=0

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号