Javascript Position Attributes

引言

在日常的工作中，很多场景下需要知道一个元素的位置信息与尺寸信息，但是涉及到这方面的属性与方法很多，有时候难以抉择使用哪个方法或属性比较合适，这就需要我们详尽掌握元素位置与尺寸相关的知识，才能熟能生巧，灵活运用。

元素的尺寸

clientHeight&clientWidth

这两个属性都是整数形式的只读的属性，其中:

clientHeight = CSS height + CSS padding - height of horizontal scrollbar
clientWidth = CSS width + CSS padding

如下图所示:

offsetHeight&offsetWidth

这两个属性也是整数形式的只读的属性，其中:

offsetHeight = CSS height(include horizontal scrollbar if rendered) + CSS padding + CSS borders (可以理解为元素包括边框的高度)
offsetWidth = CSS width(include vertical scrollbar if rendered) + CSS padding + CSS borders(可以理解为元素包括边框的宽度)

如下图所示: