文档章节

Element.getBoundingClientRect()

JamesView
 JamesView
发布于 07/17 19:56
字数 676
阅读 24
收藏 0

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

 

语法

rectObject = object.getBoundingClientRect();

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

getBoundingClientRect示例图

空边框盒(译者注:没有内容的边框)会被忽略。如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。

为了跨浏览器兼容,请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:

// 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

举例

// rect 是一个具有四个属性left、top、right、bottom的DOMRect对象
//译者注:DOMRect 是 TextRectangle或 ClientRect 的别称,他们是相同的。
var rect = obj.getBoundingClientRect();

规范

Specification Status Comment
CSS Object Model (CSSOM) View Module
Element.getBoundingClientRect()
Working Draft Initial definition

浏览器兼容性

Update compatibility data on GitHub

  Desktop Mobile
  Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet
getBoundingClientRect Full supportYes Full support12 Full support3 Full support4 Full supportYes Full support6 Full supportYes Full supportYes Full supportYes Full support4 Full supportYes Full support4

Notes

打开
Full supportYes
width Full supportYes Full supportYes Full support3.5 Full support9 Full supportYes Full supportYes Full supportYes Full supportYes ? ? Full supportYes Full supportYes ?
height Full supportYes Full supportYes Full support3.5 Full support9 Full supportYes Full supportYes Full supportYes Full supportYes ? ? Full supportYes Full supportYes ?
x Full supportYes No supportNo

Notes

打开
Full supportYes No supportNo

Notes

打开
Full supportYes No supportNo Full supportYes Full supportYes ? ? Full supportYes ? ?
y Full supportYes No supportNo

Notes

打开
Full supportYes No supportNo

Notes

打开
Full supportYes No supportNo Full supportYes Full supportYes ? ? Full supportYes ? ?

参考资料

© 著作权归作者所有

JamesView
粉丝 22
博文 122
码字总数 42434
作品 0
海淀
前端工程师
私信 提问
javascript Element.getClientRects 方法和Element.getBo

javascript Element.getClientRects 方法和Element.getBo 知行合一,止于至善2018-01-051 阅读 MySQL Element.getClientRects方法返回能将该元素框住的DOMRect对象的集合,为啥是集合呢,因为...

知行合一,止于至善
2018/01/05
0
0
有关Javascript的面试题

获取页面元素位置与宽高? element.clientWidth = content + padding element.clientHeight = content + padding element.getBoundingClientRect() 返回值情况 left:包围盒左边 border 以外的......

Jack088
2018/12/04
25
0
js中getBoundingClientRect()方法详解

getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包...

不负好时光
2018/07/24
248
0
每日 30 秒之 巧用可视区域

简介 是一个前端优化经常出现的名词,不管是显示器、手机、平板它们的范围都是有限。在这个 区域里做到完美显示和响应,而在这个区域外少做一些操作来减少渲染的压力、网络请求压力。在 每日...

zhangxiangliang
03/16
0
0
Intersection observer检测元素是否在视窗内

前言 一直以来,检测元素在浏览器视窗口内不是件容易的事,很多解决方案都不能很准确的判断,计算量也有可能拖慢网站性能。 但是很多场景都需要用到: 当页面滚动时,懒加载图片或其他内容。...

前端妹子
01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

移动开发中的 Web:WebView、WebKit、JSCore、Web 优化、热修复、跨平台、Native、Hybrid……

移动开发领域近年来已经逐渐告别了野蛮生长的时期,进入了相对成熟的时代。而一直以来 Native 和 Web 的争论从未停止,通过开发者孜孜不倦的努力,Web 的效率和 Native 的体验也一直在寻求着...

编辑部的故事
17分钟前
11
0
MySQL8.0.17 - Multi-Valued Indexes 简述

本文主要简单介绍下8.0.17新引入的功能multi-valued index, 顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支持 (感觉官方未来一定...

阿里云官方博客
今天
10
0
make4.1降级 make-3.81、2错误

在编译 make-3.82 的时候出现如下错误提示 glob/glob.c:xxx: undefined reference to `__alloca'` 修改 /glob/glob.c // #if !defined __alloca && !defined __GNU_LIBRARY__ # ifdef __GNUC......

Domineering
今天
16
0
Rainbond集群的安装和运维的原理

本文将解读Rainbond集群的安装和运维的原理,使用户基本了解Rainbond的安装机制和运维重点,便于用户搭建大型Rainbond集群。 1.Rainbond集群节点概述 1.1 节点分类 属性 类型 说明 manage 管...

好雨云帮
今天
10
0
好程序员大数据学习路线分享UDF函数

1.为什么需要UDF? 1)、因为内部函数没法满足需求。 2)、hive它本身就是一个灵活框架,允许用自定义模块功能,如可以自定义UDF、serde、输入输出等。 2.UDF是什么? UDF:user difine fun...

好程序员官方
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部