JS 获取盒模型对应宽高的五种方式，浏览器兼容及应用场景详解
2023-09-02 10:48:51
揭秘 js 中获取元素宽高信息的 5 种方法
在 Web 开发中，我们经常需要获取特定元素的宽高信息，以便进行后续计算或展示效果。JavaScript 提供了多种方法来获取这些信息，每种方法都有其独特的优势和局限性。在这篇文章中，我们将探讨 5 种常用的方法，并提供详细的示例和兼容性指南。
1. offsetWidth 和 offsetHeight
获取内容宽高，包括内边距和边框
const element = document.getElementById('element');
const width = element.offsetWidth;
const height = element.offsetHeight;
应用场景： 获取元素的总宽度和高度，包括内边距和边框。计算元素的滚动条宽度和高度。
兼容性： 广泛支持，包括 IE6+、Firefox 1+、Chrome 1+、Safari 1+ 和 Opera 9+。
2. clientWidth 和 clientHeight
获取可见内容宽高，不包括滚动条、内边距和边框
const element = document.getElementById('element');
const width = element.clientWidth;
const height = element.clientHeight;
应用场景： 获取元素的可见内容宽度和高度，不包括滚动条、内边距和边框。计算元素的内容宽度和高度。
兼容性： 良好支持，包括 IE4+、Firefox 1+、Chrome 1+、Safari 1+ 和 Opera 7+。
3. getBoundingClientRect()
获取相对于视口的位置和大小
const element = document.getElementById('element');
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
应用场景： 获取元素相对于视口的位置和大小。计算元素的绝对位置。检测元素是否可见。
兼容性： 较新浏览器支持，包括 IE8+、Firefox 3.5+、Chrome 1+、Safari 5+ 和 Opera 10.5+。
4. scrollWidth 和 scrollHeight
获取滚动内容宽高，包括滚动条
const element = document.getElementById('element');
const width = element.scrollWidth;
const height = element.scrollHeight;
应用场景： 获取元素的滚动内容宽度和高度。计算元素的滚动条宽度和高度。
兼容性： 良好支持，包括 IE5+、Firefox 1+、Chrome 1+、Safari 1+ 和 Opera 7+。
5. innerWidth 和 innerHeight
获取内部宽高，包括内边距，但不包括边框和滚动条
const element = document.getElementById('element');
const width = element.innerWidth;
const height = element.innerHeight;
应用场景： 获取元素的内部宽度和高度，包括内边距，但不包括边框和滚动条。计算元素的内容宽度和高度。
兼容性： 较新浏览器支持，包括 IE8+、Firefox 1+、Chrome 1+、Safari 1+ 和 Opera 10.5+。
常见问题解答
1. 我应该使用哪种方法？
- 选择合适的方法取决于您的具体需求。
- 对于大多数情况，clientWidth 和 clientHeight 是一个很好的选择，因为它可以提供元素可见内容的宽高。
- 如果您需要元素的总宽高，包括内边距和边框，请使用 offsetWidth 和 offsetHeight 。
- 如果您需要元素相对于视口的位置和大小，请使用 getBoundingClientRect() 。
2. 这些方法在不同浏览器中的兼容性如何？
- 所有 5 种方法在大多数现代浏览器中都得到广泛支持。
- 请参考上述的兼容性指南以获取特定浏览器的详细信息。
3. 这些方法会影响元素布局吗？
- 否，这些方法不会影响元素布局。它们只是返回元素的宽高信息。
4. 如何获取元素滚动条的大小？
- 使用 scrollWidth 和 scrollHeight 属性。
- 它们将返回元素滚动内容的宽高，包括滚动条。
5. 如何计算元素的内容大小？
- 使用 clientWidth 和 clientHeight 来获取元素可见内容的宽高。
- 然后从 offsetWidth 和 offsetHeight 中减去内边距和边框来计算内容大小。
