原生JS取得元素的位置與尺寸

1、內高度、內寬度： 內邊距+ 內容框

clientWidth
clientHeight

2、外高度，外寬度： 邊框+ 內邊距+ 內容框

offsetWidth
offsetHeight

3、上邊框、左邊框

clientTop
clientLeft

4、元素的大小及其相對於視窗的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离

5、上邊偏移量，左邊的偏移量

offsetTop
offsetLest

6.可視區域的大小

document.documentElement.clientWidth
document.documentElement.clientHeight

7、頁面的實際大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight

8、視窗左上角與螢幕左上角的距離

window.screenX、
window.screenY

9、螢幕寬高

window.screen.width
window.screen.height

10、螢幕可用寬高（移除工作列）

window.screen.availWidth
window.screen.availHeight

11、視窗的內高度、內寬度（文件顯示區域+捲軸）

window.innerWidth
window.innerHeight

#12 、視窗的外高度、外寬度

window.outerWidth
window.outerHeiht

以上是原生JS取得元素的位置與尺寸的詳細內容。更多資訊請關注PHP中文網其他相關文章！