getComputedStyle, getPropertyValue, getBoundingClientRect

这三个方法都是 JavaScript 中常用的 DOM API，用于获取元素的样式和位置信息。

1. `getComputedStyle(element)` 方法返回一个对象，其中包含了指定元素的所有计算后样式，包括默认样式和内联样式。可以使用该方法获取元素的样式信息，例如：

const element = document.querySelector('.my-element');
const styles = window.getComputedStyle(element);
console.log(styles.color); // "#333"
console.log(styles.fontSize); // "16px"

2. `getPropertyValue(propertyName)` 方法返回指定样式属性的计算后值。它需要一个参数，即要获取值的样式属性名称。例如：

const element = document.querySelector('.my-element');
const styles = window.getComputedStyle(element);
console.log(styles.getPropertyValue('color')); // "#333"
console.log(styles.getPropertyValue('font-size')); // "16px"

3. `getBoundingClientRect()` 方法返回一个 DOMRect 对象，其中包含了指定元素的位置信息，包括 left、top、right、bottom、width、height 等属性。例如：

const element = document.querySelector('.my-element');
const rect = element.getBoundingClientRect();
console.log(rect.left); // 元素左侧距离视口左侧的距离
console.log(rect.top); // 元素顶部距离视口顶部的距离
console.log(rect.right); // 元素右侧距离视口左侧的距离
console.log(rect.bottom); // 元素底部距离视口顶部的距离
console.log(rect.width); // 元素的宽度
console.log(rect.height); // 元素的高度