DOM元素尺寸获取

时间:2022-08-13 21:07:00

clientWidth:获取元素的宽度(包括内边距,减去滚动条)
clientHeight:获取元素的高度(包括内边距,减去滚动条)

offsetWidth:获取元素的宽度(包括边框、内边距、滚动条)
offsetHeight:获取元素的高度(包括边框、内边距、滚动条)

scrollWidth:获取元素宽度(包括内边距,减去滚动条,包括超出内容的宽度)
scrollHeight:获取元素高度(包括内边距,减去滚动条,包括超出内容的高度)

clientTop:获取元素上边框尺寸
clientLeft:获取元素左边框尺寸

offsetTop: 获取元素离父元素顶部的距离
offsetLeft: 获取元素离父元素左边的距离

scrollTop:获取滚动条离文档顶部的距离
scrollLeft:获取滚动条离文档左侧的距离

getBoundingClientRect():获取元素上下左右离窗口(定位状态下及IE是离文档)顶部和左侧尺寸的集合
getBoundingClientRect().top:获取元素顶部到文档顶部距离
getBoundingClientRect().bottom:获取元素底部到文档顶部距离
getBoundingClientRect().left:获取元素左边到文档左边距离
getBoundingClientRect().right:获取元素右边到文档左边距离