开发者笔记 - 每天积累一点

最近在学习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>

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

h5点滴

getBoundingClientRect(学习)