js里关于各种尺寸的获取
Posted 听见下雨声
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js里关于各种尺寸的获取相关的知识，希望对你有一定的参考价值。
二、获取元素的尺寸
| 元素尺寸属性 | 说明 |
|---|---|
| clientWidth | 获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 |
| clientHeight | 获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 |
| offsetWidth | 元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度 |
| offsetHeight | 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度 |
| scrollWidth | 当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 |
| scrollHeight | 当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 |
二、元素尺寸的精准获取（含小数点）
| 属性或方法 | 说明 |
|---|---|
| getComputedStyle(element)[style] | 可以获取元素的高度或者宽度 |
| element.getBoundingClientRect().style | 可以获取元素的高度，宽度，距离顶部，底部，左，右的距离和坐标 |
二、元素尺寸的获取JQ
| 属性或方法 | 说明 |
|---|---|
| $(element).width(); | 可以获取元素的宽度（不含小数） |
| $(element).height(); | 可以获取元素的高度（不含小数） |
|
$(element).offset()
|
获取元素距离顶部和左部的距离（含小数） |
以上是关于js里关于各种尺寸的获取的主要内容，如果未能解决你的问题，请参考以下文章