在 JavaScript 中，getComputedStyle、getBoundingClientRect 和 getClientRects 是用于获取元素宽高及位置信息的方法，以下是对它们的介绍：
-
getComputedStyle()：- 这个方法可以获取指定元素的最终计算后的 CSS 样式。
- 可以通过该方法获取元素的宽度和高度属性，如
width和height。 - 适用场景： 当需要获取元素的具体 CSS 样式属性值时很有用，不仅限于宽高，还可以获取颜色、字体大小等各种样式属性。
- 示例：
const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
const width = styles.width;
const height = styles.height;
- 返回的宽度和高度通常包含单位，如
100px，需要进一步处理（如parseInt()）才能得到纯数字的宽高值。
-
getBoundingClientRect()：- 返回一个 DOMRect 对象，包含元素的位置和大小信息。
- 可以直接获取元素的宽度和高度，以及相对于视口的位置信息。
- 适用场景： 常用于获取元素相对于视口的位置和大小，在需要进行元素的定位、碰撞检测等场景下非常方便。
- 示例：
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
- 返回的宽度和高度是数值类型，不需要额外处理单位。
-
getClientRects()：- 返回一个
ClientRect对象的集合，代表元素的每个边框矩形。 - 如果元素有多个边框矩形（例如多行文本的元素），则会返回多个
ClientRect对象。 - 通常用于获取元素的多个部分的位置和大小信息。
- 适用场景： - 当需要获取元素内部多个部分的位置和大小信息时比较有用，例如处理多行文本的布局或者有多个内联元素组成的复杂布局。
- 示例：
- 返回一个
const element = document.getElementById('myElement');
const rects = element.getClientRects();
for (const rect of rects) {
const width = rect.width;
const height = rect.height;
}
- 每个
ClientRect对象的宽度和高度也是数值类型。
这些方法在不同的场景下有不同的用途。getComputedStyle 更适用于获取 CSS 样式属性，getBoundingClientRect 通常用于获取元素相对于视口的位置和大小，而 getClientRects 可以用于处理具有多个边框矩形的元素。
除了 getComputedStyle()和 getBoundingClientRect()方法，还有哪些方法可以获取元素的宽高？
以下是一些获取元素宽高的其他方法：
一、使用 offsetWidth 和 offsetHeight 属性
const element = document.getElementById('myElement');
const width = element.offsetWidth;
const height = element.offsetHeight;
offsetWidth 和 offsetHeight 返回元素的布局宽度和高度，包括元素的边框、内边距和内容的尺寸。
二、使用 clientWidth 和 clientHeight 属性
const element = document.getElementById('myElement');
const width = element.clientWidth;
const height = element.clientHeight;
clientWidth 和 clientHeight 返回元素的内容区域宽度和高度，加上内边距大小，但不包括边框和滚动条。
三、通过元素的 style 属性设置并获取尺寸
const element = document.getElementById('myElement');
// 先设置元素的尺寸属性，假设单位为像素
element.style.width = '200px';
element.style.height = '150px';
const width = parseInt(element.style.width);
const height = parseInt(element.style.height);
这种方法需要先设置元素的尺寸属性，然后通过 style 属性获取，但只适用于已设置了 style 属性的元素，并且获取的值是字符串类型，需要进行类型转换。
创作者训练营系列
