获取DOM节点的大小

1、width和height

用来获取内容区的大小

---

2、clientWidth和clientHeight

这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。

PS：返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em

之类，它还是会返回px 的大小。(CSS 获取的话，是照着你设置的样式获取)。

PS：对于元素的实际大小，clientWidth 和clientHeight 理解方式如下：

1.增加边框，无变化，为200；

2.增加外边距，无变化，为200；

3.增加滚动条，最终值等于原本大小减去滚动条的大小，为184；

4.增加内边距，最终值等于原本大小加上内边距的大小，为220；

3、offsetWidth和offsetHeight

这组属性可以返回元素实际大小，包含边框、内边距和滚动条。

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，他会得到

计算后的宽度和高度。

PS：对于元素的实际大小，offsetWidth 和offsetHeight 理解如下：

1.增加边框，最终值会等于原本大小加上边框大小，为220；

2.增加内边距，最终值会等于原本大小加上内边距大小，为220；

3.增加外边据，无变化；

4.增加滚动条，无变化，不会减小；

4.scrollWidth 和scrollHeight

这组属性可以获取滚动内容的元素大小。

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，它会得到

计算后的宽度和高度。

PS：对于元素的实际大小，scrollWidth 和scrollHeight 理解如下:

1.增加边框，不同浏览器有不同解释：

a) Firefox 和Opera 浏览器会增加边框的大小，220 x 220

b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200

c) IE 浏览器只显示它本来内容的高度，200 x 18

2.增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为220 x 38

3.增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为184 x 18

4.增加外边据，无变化。

5.增加内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览

器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。