Get the position and size of elements using native JS

1. Inner height, inner width: inner margin + content box

clientWidth
clientHeight

2. Outer height, outer width: border + inner margin + content box

offsetWidth
offsetHeight

3. Top Border, left border

clientTop
clientLeft

4, the size of the element and its position relative to the viewport

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

5, top offset, left offset

offsetTop
offsetLest

6. The size of the visible area

document.documentElement.clientWidth
document.documentElement.clientHeight

7. The actual size of the page

document.documentElement.scrollWidth
document.documentElement.scrollHeight

8. The distance between the upper left corner of the window and the upper left corner of the screen

window.screenX、
window.screenY

9. The screen width and height

window.screen.width
window.screen.height

10. Available width and height of the screen (removing the taskbar)

window.screen.availWidth
window.screen.availHeight

11. Inner height and inner width of the window (document display area + scroll bar)

window.innerWidth
window.innerHeight

12 , the outer height and outer width of the window

window.outerWidth
window.outerHeiht

The above is the detailed content of Get the position and size of elements using native JS. For more information, please follow other related articles on the PHP Chinese website!