getBoundingClientRect(学习)

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

最近在学习CK5的时候,学习到了一个Rect的类,这个类主要提供盒子元素定位时候用到的一些值,比如top、left、right、bottom、width、height。而它的实现主要用到了两个方法,其中一个就是:Element.getBoundingClientRect()

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,该对象提供有关元素大小及其相对于视口的位置的信息。

注意:这个方法的返回值是记录元素大小,以及相对于视口的位置信息

调用语法如下:

domRect = element.getBoundingClientRect();

说明:返回值是一个 DOMRect 对象,它是包含整个元素的最小矩形,包括它的填充(padding)边框(border)宽度

left、top、right、bottom、x、y、width 和 height 属性描述了整个矩形的位置和大小(以像素为单位)。宽度和高度以外的属性相对于视口的左上角。该方法返回的 DOMRect 对象的 width 和 height 属性包括 padding 和 border-width,而不仅仅是content的宽度/高度。在标准盒子模型中,这将等于元素的宽度或高度属性 + 填充(padding) + 边框(border)宽度。但是如果为元素设置了 box-sizing:border-box ,这将直接等于它的宽度或高度。

返回值可以被认为是 getClientRects() 为元素返回的矩形的并集,即与元素关联的 CSS 边框。

空边框框被完全忽略。如果所有元素的边框框都是空的,则返回一个宽度和高度为零的矩形,其中顶部和左侧是第一个 CSS 框(按内容顺序)的边框框的左上角元素。

在计算边界矩形时,会考虑视口区域(或任何其他可滚动元素)的滚动量。这意味着每次滚动位置改变时,矩形的边界边缘(上、右、下、左)都会改变它们的值(因为它们的值是相对于视口而不是绝对的)。

如果您需要相对于文档左上角的边界矩形,只需将当前滚动位置添加到 top 和 left 属性(这些可以使用 window.scrollX 和 window.scrollY 获得)以获得边界矩形,即 独立于当前滚动位置。

我用一段代码来演示一下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getBoundingClientRect</title>
    <style>
        div {
		  width: 400px;
		  height: 200px;
		  padding: 20px;
		  margin: 50px auto;
		  background: purple;
		}

    </style>
</head>
<body>
    <div>
	</div>
<script>
	let elem = document.querySelector('div');
	let rect = elem.getBoundingClientRect();
	for (var key in rect) {
	  if(typeof rect[key] !== 'function') {
		let para = document.createElement('p');
		para.textContent  = `${ key } : ${ rect[key] }`;
		document.body.appendChild(para);
	  }
	}
</script>
</body>
</html>

演示的结果显示出了值宽度和高度不会改变,但是如果我改变窗口的大小,那些定位属性的值会发生变化。不过这些值都是相对于视口定位的。并且宽度是加上了padding的大小

 

我在演示一下有滚动的情况:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getBoundingClientRect</title>
    <style>
        div#example {
		  width: 400px;
		  height: 200px;
		  padding: 20px;
		  margin: 50px auto;
		  background: purple;
		}

		body { padding-bottom: 1000px; }
		p { margin: 0; }


    </style>
</head>
<body>
    <div id="example"></div>
    <div id="controls"></div>
<script>
	function update() {
	  const container = document.getElementById("controls");
	  const elem = document.getElementById("example");
	  const rect = elem.getBoundingClientRect();

	  container.innerHTML = '';
	  for (let key in rect) {
		if(typeof rect[key] !== 'function') {
		  let para = document.createElement('p');
		  para.textContent  = `${ key } : ${ rect[key] }`;
		  container.appendChild(para);
		}
	  }
	}

document.addEventListener('scroll', update);
update();

</script>
</body>
</html>

通过以上的演示代码,可以看到,当我滚动窗口的时候,定位元素会发生变化,这也容易理解,因为是相对于视口定位嘛

版权声明:著作权归作者所有。

相关推荐

JavaScript ES 2017: 通过示例学习Async/Await

预备知识ES 2017新增了Asynchronous函数。 在JavaScript中,Async函数本质上是一种处理异步代码的比较简洁的方法。 为了理解这些是什么,以及它们是如何工作的,我们首先需要了解Promise。如果你不知道Promise是什么,那么你应该先阅读我发表的关于Promise的这篇文章。 在理解Promise之前,你是不会理解JavaScr

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

GPU架构学习资源

这里收藏了gpu学习的网站,pdf等等资源:http://courses.cms.caltech.edu/cs179/http://www.amd.com/Documents/GCN_Architecture_whitepaper.pdfhttps://community.arm.com/graphics/b/bloghttp://cdn.imgtec.com/sdk-documentation/

[译]5分钟学习React.js

本教程将通过构建一个非常简单的应用程序,让你对React.js有基本的了解。我会抛弃所有我认为不是核心的东西。如果你喜欢我的教学风格,在我们即将推出免费的React.js课程时你想收到通知,可以在此留下电子邮件。设置在开始使用React时,你应该使用最简单的设置:在html文件中使用script标签导入React和ReactDOM库,如下所示:<html><head><

你今天应该学习的20个Python代码段(翻译)

Python是一门非BS编程语言。可读性和设计简单性是其广受欢迎的两个主要原因。正如Python的禅宗所说:美丽胜于丑陋。 显式胜于隐式。这就是为什么值得记住一些常见的Python技巧来帮助改善代码设计的原因。这些将为你节省每次需要到Stack Overflow找解决方案的时间。在日常编码练习中,以下技巧将非常有用。1.反转字符串以下代码段使用Python切片操作来反转字符串。# Rev

thenjs 学习

thenjs 是一个js的异步控制流程库 特点 可以像标准的Promise那样,把N多异步回调函数写成一个长长的then链,并且比Promise更简洁自然。因为使用标准Promise的then链,其中的异步函数都必须转换成Promise,Thenjs则无需转换,像使用CallBack一样执行异步函数即可。 强大的Error机制,可以捕捉任何同步和异步的异步错误。 开启debug模式

JPA实体状态学习-(瞬时态:Transient)

为了学习实体的状态,我们还是贴出这张实体状态转换迁移图:Transient(瞬时态)按照上图的描述,java对象在内存中被赋值后,没有调用entityManager.persist()方法之前实体对象所处的状态就是瞬時態举个例子:Teacher teacher = new Teacher("email@dot.com");此时,实例teacher就处于new/transient态(备注:这里的ne

JPA实体状态学习-(持久态:Persistent)

今天我们继续学习JPA的实体状态转化,老规矩贴上实体转化的转化图: 上一节我们学习了:entityManager调用persist()方法后,实体的状态从transient到persistent,这个时候对persistent状态的实体改变也会同步持久化到数据库,执行tx.commit()之后实体进入detached状态,此时对实体进行改变后不会同步到数据库。今天我们来看看transie

JPA实体状态学习-(游离态:Detached)

今天我们学习另一种实体状态,老规矩还是先上图:Detached(游离态 unmanaged)An Object becomes detached when the currently running Persistence Context is closed. Any changes made to detached objects are no longer automatically prop