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>

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

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

thumb_up 0 | star_outline 0 | textsms 0