js 获取元素宽高

// 获取元素的宽高

// 假设我们有一个 HTML 元素，例如 <div id="myElement"></div>
// 我们可以通过以下几种方式来获取该元素的宽高

// 1. 使用 getBoundingClientRect() 方法
// 这个方法返回一个 DOMRect 对象，提供了元素的大小及其相对于视口的位置
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
console.log('宽度: ' + rect.width);
console.log('高度: ' + rect.height);

// 2. 使用 offsetWidth 和 offsetHeight 属性
// 这些属性返回包括内边距和边框在内的元素的宽度和高度
console.log('宽度: ' + element.offsetWidth);
console.log('高度: ' + element.offsetHeight);

// 3. 使用 clientWidth 和 clientHeight 属性
// 这些属性返回包括内边距但不包括边框和滚动条的元素的宽度和高度
console.log('宽度: ' + element.clientWidth);
console.log('高度: ' + element.clientHeight);