browser ⟩ DOM ⟩ type ⟩ Element ⟩ boxes
.paddingBox = content + padding
.borderBox = content + padding + border (+ scrollbars, if present)
.boundingBox - similar to .borderBox.
.scrollBox = content + padding + overflow
viewport
👔 Element+boxes
⭐️ Note: .offsetParentarrow-up-right returns null in the following situations:
the element (or its parent) has display:none.
display:
none
the element has position:fixed ( Firefox returns <body>).
position:
fixed
<body>
the element is <html> or <body>.
<html>
.boundingBox is similar to box models
in the standard box model： size = content(widtharrow-up-right, heightarrow-up-right) + padding + border.
if box-sizing: box-sizingarrow-up-right： size = (widtharrow-up-right, heightarrow-up-right)
position: (.clientToparrow-up-right, .clientLeftarrow-up-right) in .borderBox
for inline elements (like <i>, <code>, <span>), they all return 0.
0
size: (.clientWidtharrow-up-right, .clientHeightarrow-up-right)
for inline elements and elements with no CSS(❓), they all return zero.
CSS ⟩ box model
.scrollBox
Window
document size
elem.position()
mouse event / touch event - (.clientX, .clientY), (.pageX, .pageY)
Rect
HTML vs Body: How to Set Width and Height for Full Page Sizearrow-up-right
Element ⟩
.clientWidtharrow-up-right, .clientHeightarrow-up-right
.scrollLeftarrow-up-right, .scrollToparrow-up-right, .scrollTo()arrow-up-right, .scrollWidtharrow-up-right, .scrollHeightarrow-up-right
Window ⟩
.scrollXarrow-up-right, .scrollYarrow-up-right
Last updated 1 year ago
