获取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 比前三个浏览器获取的高度偏大。

推荐阅读更多精彩内容