The length and width of the element:
node.style.width/height
Content visual width/height of block-level elements + horizontal/vertical padding value:
node.clientWidth/clientHeight, the value obtained for pure inline elements is always 0
Dimensions of the page viewport (the area where the browser displays page content):
documentElement.clientWidth/clientHeight
Element content visual width/height+horizontal/vertical padding value+horizontal/vertical border value :
node.offsetWidth/offsetHeight
Element's content visible width/height + horizontal/vertical padding value + horizontal/vertical scrolling or overflow part content width/height:
node.scrollWidth/scrollHeight, when there is no scroll overflow content, this value is consistent with the corresponding ciientWidth/clientHeight
- The value obtained for purely inline elements is always 0.
- The size of the page viewport can be obtained through documentElement.scrollWidth/scrollHeight
Viewport width/height of the current page:
window.innerWidth/innerHeight is generally equivalent to documentElement.clientWidth/clientHeight
window.outerWidth/outerHeight, indicating the width/height of the current entire browser window , that is, the width/height displayed by the browser software you open
In the case of an ideal viewport on the mobile side, generally innerWidth and outerWidth are equal
CSS pixel values for screen width/height:
window.screen.width/height/availWidth/availHeight
The CSS pixel value of the current browser's available width/height on the screen:
screen.availWidth/availHeight, or understood as the maximum possible width/height of the browser in the current state.
screen.width is not necessarily equal to screen.availWidth. The browser sometimes cannot take up the space occupied by a gadget (such as the taskbar) when there are other gadgets taking up the screen space.
Dimensions of the element from the browser window:
node.getBoundingClientRect(), the return value of this method is an object with two size properties of width and height. If it is a standard box model, the size of the element is equal to the sum of width/height + padding + border-width. If box-sizing: border-box, the size of the element is equal to width/height.
event.pageX/Y，screenX/Y，clientX/Y
From the DOM event Event object
pageX/Y indicates the position of the event trigger position relative to the upper left corner of the overall page (including the page scrolling distance)
screenX/Y indicates the position of the event trigger position relative to the upper left corner of the screen
clientX/Y indicates the position of the event trigger position relative to the upper left corner of the visible area of the current page
node.offsetTop/offsetLeft
Indicates the position of the top/left border padding of the current node element relative to the nearest positioned ancestor element
node.scrollTop/scrollLeft
Indicates the vertical/horizontal distance scrolled inside the current node element, provided that a scroll bar is generated inside the element, otherwise the value returns 0
node.style.left/top
This can only get the left/top attribute value defined in the inline style style of the element. If the element does not define the style attribute, the return value is an empty string
node.getBoundingClientRect()
Returns an object, which contains four properties left, right, top, and bottom, which respectively correspond to the distance between the upper left corner and the lower right corner of the element relative to the upper left corner of the browser window (viewport).