各种获取元素宽高距离总结与使用场景

在项目开发中，我们经常需要获取元素的大小、网页的高度、视口的高度、各种距离等等，本文将对此进行详细的总结和介绍，帮助前端开发人员在实际工作中快速获取所需的信息。

1. 获取整个网页的高度和宽度

• 火狐不兼容document.body.scrollHeight，所以火狐中需要用document.documentElement.scrollHeight代替。

2. 获取视口的高度和宽度

• document.documentElement.clientHeight：获取视口的高度（不包括工具栏和滚动条）。
• document.documentElement.clientWidth：获取视口的宽度（不包括工具栏和滚动条）。

3. 获取文档的高度和宽度

• document.documentElement.scrollHeight：获取文档的总高度（包括隐藏的部分）。
• document.documentElement.scrollWidth：获取文档的总宽度（包括隐藏的部分）。

4. 获取滚动的高度和宽度

• document.documentElement.scrollLeft：获取文档的水平滚动距离。
• document.documentElement.scrollTop：获取文档的垂直滚动距离。

5. 获取客户区的高度和宽度

• document.documentElement.clientHeight：获取客户区的高度（不包括工具栏和滚动条）。
• document.documentElement.clientWidth：获取客户区的宽度（不包括工具栏和滚动条）。

6. 获取元素的边界高度和宽度

• element.getBoundingClientRect().width：获取元素的边框宽度（包括padding和border）。
• element.getBoundingClientRect().height：获取元素的边框高度（包括padding和border）。

7. 获取元素的margin高度和宽度

• element.style.marginTop：获取元素的上外边距。
• element.style.marginRight：获取元素的右外边距。
• element.style.marginBottom：获取元素的下外边距。
• element.style.marginLeft：获取元素的左外边距。

8. 获取元素的padding高度和宽度

• element.style.paddingTop：获取元素的上内边距。
• element.style.paddingRight：获取元素的右内边距。
• element.style.paddingBottom：获取元素的下内边距。
• element.style.paddingLeft：获取元素的左内边距。

9. 获取元素的offset高度和宽度

• element.offsetHeight：获取元素的内容高度（包括padding）。
• element.offsetWidth：获取元素的内容宽度（包括padding）。