js里关于各种尺寸的获取
2021-03-14 17:28
标签：body scroll 小数点 关于 宽度 元素 设置 包含 getc js里关于各种尺寸的获取 标签：body scroll 小数点 关于 宽度 元素 设置 包含 getc 原文地址：https://www.cnblogs.com/stardreams/p/12808722.html二、获取元素的尺寸
元素尺寸属性
说明
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();
可以获取元素的高度（不含小数）
获取元素距离顶部和左部的距离（含小数）
下一篇：PHP处理字符中的emoji表情