获取元素的尺寸

有许多的属性可以获取元素的尺寸，但是要获取你所需要的正确的那一个却比较棘手。本位协助你获取正确的属性。

元素占据多大空间

---

如果你想知道一个元素占据多大空间，包括可见内容的宽度、滚动条（如果有）、内边距和边框，你可以使用offsetHeight和offsetWidth属性。他们和使用getBoudingClientRect()得到的高度和宽度是一致的。 

所显示的内容所占的空间

---

如果你想得到所显示的内容占据多少空间，包括内边框但是不包括边框、外边框或者滚动条，你需要使用clientWidth和clientHeight属性：

获取元素内容实际大小：

---

如果你想知道元素内容的实际大小，不考虑可见部分大小，你可以使用scrollWidth和scrollHeight属性。他们返回元素的实际内容的宽度和高度，尽管由于滚动条存在，实际显示的内容只是整个元素内容的一部分。

例如：如果一个元素的时间大小是600*400pixel,由于滚动条存在，我们只能看到300*300pixel滚动框的部分，scrollWidth将会返回600，scrollHeight将会返回400.

---MDN