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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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
全国中波电台频率表
2020/03/11 无线电
一些php技巧与注意事项分析
2011/02/03 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
简单学习Python time模块
2016/04/29 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python实现对输入的密文加密
2019/03/20 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
Java中compareTo和compare的区别
2016/04/12 面试题
Java工程师面试集锦之Spring框架
2013/06/16 面试题
电脑销售顾问自荐信
2014/01/29 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
MySQL系列之四 SQL语法
2021/07/02 MySQL
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏