JavaScript 获取元素宽度

在 Web 开发中，经常需要获取元素的宽度。JavaScript 原生提供了两种方式来获取元素的宽度：offsetWidth 和 clientWidth。

offsetWidth

offsetWidth 属性返回元素的布局宽度，包括边框、内边距和滚动条的宽度（如果存在）。下面是一个使用 offsetWidth 属性获取元素宽度的示例：

const element = document.getElementById('example');
const width = element.offsetWidth;
console.log(width);

clientWidth

clientWidth 属性返回元素的可视宽度，不包括边框、内边距和滚动条的宽度。下面是一个使用 clientWidth 属性获取元素宽度的示例：

const element = document.getElementById('example');
const width = element.clientWidth;
console.log(width);

兼容性

offsetWidth 和 clientWidth 属性对各种浏览器都有良好的兼容性。

结语

本文介绍了两种获取元素宽度的方法，分别是 offsetWidth 和 clientWidth 属性。在实际开发中，我们可以根据不同的需求选择不同的方法来获取元素宽度。