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()	获取元素距离顶部和左部的距离（含小数）