在JavaScript中，可以使用clientWidth、clientHeight、offsetHeight和scrollHeight来获取元素的高度和宽度。clientWidth和clientHeight分别代表元素的可视宽度和高度，不包括边框和滚动条；offsetWidth和offsetHeight包括了边框但不考虑滚动条；scrollWidth和scrollHeight则表示元素的总宽度和高度，即使内容超出可视区域，考虑了滚动条的情况。
在 Javascript 中，使用下面3组属性可以获取元素的高度和宽度。如图所示。
| 元素尺寸属性 | 说明 |
| clientWidth | 获取元素可视部分的宽度，即 css 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 |
| clientHeight |
获取元素可视部分的高度，即 css 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内 |
| offestWidth | 元素在页面中占据的宽度总和，包括 width 、padding、border 以及滚动条的宽度 |
| offestHeight | 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条地宽度 |
| scrollWidth | 当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏区域 |
| scrollHeight | 当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientwidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 |
查看 offsetHeight、scrollHeight、clientHeight 这 3 个属性的不同，具体说明如下：
clientHeight = 内上边距 + 高度 + border-button-width（下边框的宽度）
offsetHeight = border-top-width（上边框的宽度） + 内上边距 + 高度 + 内下边距 + border-buttom-width（下边框的宽度）
scrollHright = 内上边距 + 包含内容的完全高度 + 内下边距
扫一扫
3970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
