JS中获取 DOM 元素的绝对位置实例详解


Posted in Javascript onApril 23, 2018

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧。

本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性。关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文。

概述

这些是本文涉及的 API 对应的文档和标准,供查阅:

API 用途 文档 标准
offsetTop 相对定位容器的位置 MDN CSSOM View Module
clientTop 上边框宽度 MDN CSSOM View Module
.getBoundingClientRect() 元素大小和相对视口的位置 MDN CSSOM View Module
.getClientRects() 所有子 CSS 盒子的大小和位置 MDN CSSOM View Module
.getComputedStyle() 应用所有样式表和计算之后的 CSS 属性 MDN DOM Level 2 Style CSSOM

offsetTop/offsetLeft

HTMLElement.offsetTop 用来获取当前元素(不包括上边框)相对于定位容器(positioning container)的位置。也就是说,

如果所有祖先元素都是静态定位 position:static;(这是默认的情况),offsetTop 表示与文档最上方的高度差(文档最上方可能已经滚出视口,这个高度可能大于视口高度)。

如果存在绝对定位的祖先元素 position:absolute/fixedoffsetTop 就会相对于这个元素。因此为了获取相对于文档最上方的高度差,需要递归地调用:

function getOffsetTop(el){
 return el.offsetParent
  ? el.offsetTop + getOffsetTop(el.offsetParent)
  : el.offsetTop
}

el.offsetParent 是当前元素的定位容器(positioning container),如果当前元素没有绝对定位的祖先节点,这个属性的值就是 null

兼容性和限制:几乎所有浏览器都支持该属性。如果元素被隐藏它的值就是 0,但在 IE9 下没有影响。

clientTop/clientLeft

不要被名字误导,Element.clientTop 是指当前元素的 上边框的宽度 的整数值。总是等于 getComputedStyle() 返回的 border-top-width 属性的四舍五入为整数后的值。

为什么呢?在 DOM 术语中,client 总是指除边框(border)外的渲染盒子(内边距+内容大小)。offset 总是指包含边框的渲染盒子(边框+内边距+内容大小),clientTop 即为这两者的 Top 之差,即边框宽度。盒子的概念请参考:CSS Display 属性与盒模型

兼容性和限制:同 offsetTop/offsetLeft

.getBoundingClientRect()

Element.getBoundingClientRect() 用于获取元素的大小,以及相对于视口(viewport)的位置,返回一个 DOMRect 对象。

> document.querySelector('span').getBoundingClientRect()
DOMRect {x: 2.890625, y: 218.890625, width: 1264, height: 110, top: 218.890625, …}
bottom: 328.890625
height: 110
left: 2.890625
right: 1266.890625
top: 218.890625
width: 1264
x: 2.890625
y: 218.890625

如果要获取相对于文档左上角的位置,需要在上述 topleft 的基础上再加滚动位置。如下代码来自 MDN,可兼容几乎所有浏览器:

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

兼容性和限制:同样是 CSSOM View Module 的特性,但几乎兼容所有浏览器,可参考

https://caniuse.com/#feat=getboundingclientrectIE 下窗口的左上角可能不是 0,0,在 IE9 可以这样把它设置为 0,0:

<meta http-equiv="x-ua-compatible" content="ie=edge"/>

.getClientRects()

Element.getClientRects() 用来获得 DOM 元素中的所有CSS 盒模型 对应的 DOMRect 组成的集合。

如果是一个块级元素,返回的集合中应该只有一个元素,即这个块的大小和位置。但如果是一个行内元素(或者 SVG 内的元素),则会返回其中每个 CSS 盒子。比如一个普通的被默认折行的 <span>

> document.querySelector('span').getClientRects()
DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, length: 5}
0: DOMRect {x: 2.890625, y: 262.890625, width: 1264, height: 22, top: 262.890625, …}
1: DOMRect {x: 2.890625, y: 284.890625, width: 1264, height: 22, top: 284.890625, …}
2: DOMRect {x: 2.890625, y: 306.890625, width: 768, height: 22, top: 306.890625, …}

这个 <span> 有三行,其中第三行的长度不足一行,每次折行都形成了一个新的 CSS 盒子。

兼容性和限制:在 IE8 及以下会返回 IE 独有的 TextRectangle 对象(而不是 ClientRect),这个对象不具有 widthheight 属性,而且无法给它设置属性。参考:https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/

.getComputedStyle()

Window.getComputedStyle() 可以得到一个元素的所有计算后的 CSS 属性。对于简单的绝对定位元素,可以通过这个 API 返回的 topleft 等属性值获取元素的位置。例如:

let btn = document.querySelector('#btn-scroll-up')
let {top, left} = getComputedStyle(btn)
console.log('top:', top, 'left:', left)

.getComputedStyle() 还有一个有用的用法,获取伪元素的大小和位置等样式信息:

// 以下代码来自: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
var h3 = document.querySelector('h3'); 
var result = getComputedStyle(h3, ':after').content;
console.log('the generated content is: ', result); // returns ' rocks!'

兼容性和限制:.getComputedStyle() 几乎兼容所有浏览器,可参考 https://caniuse.com/#search=getComputedStyle。但它返回的值是 CSS 属性,用它获取绝对位置时要注意值的类型。例如 left 可能是 13px 这样的绝对值,也可能是 auto 这样的 CSS 关键字。

总结 获取 DOM 元素相对于文档的位置,可以直接使用 offsetTop; 获取 DOM 元素相对于视口的位置,可以使用 .getBoundingClientRect(); 获取 SVG 元素或行内元素的 CSS 盒子(比如用来做文本高亮时),可以使用 .getClientRects(); 获取绝对定位元素、伪元素的渲染后 CSS 属性,可以使用 .getComputedStyle()

总结

以上所述是小编给大家介绍的JS中获取 DOM 元素的绝对位置实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
Vue前端开发规范整理(推荐)
Apr 23 #Javascript
Vue 中mixin 的用法详解
Apr 23 #Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 #Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 #Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 #Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 #Javascript
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
You might like
php5.2.0内存管理改进
2007/01/22 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHP自定义多进制的方法
2016/11/03 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
js对象关系图 方便dom操作
2012/03/18 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
谈谈python中GUI的选择
2018/03/01 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python基于当前时间批量创建文件
2020/05/07 Python
医院总经理职责
2013/12/26 职场文书
办公室经理岗位职责
2014/01/01 职场文书
物流仓管员工作职责
2014/01/06 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
护士长竞聘书
2014/03/31 职场文书
委托书的格式
2014/08/01 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
大学生党员个人总结
2015/02/13 职场文书
市级三好生竞选稿
2015/11/21 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers