Dom api dimesions
A collection of links and brief descriptions of API used to query the dimensions of DOM elements using the javascript DOM api.
Element properties:
clientHeight:
content width + padding - horizontal scrollbar, if present, (0 for inline or if not specified).
clientWidth:
content height + padding - vertical scrollbar, if present.
scrollHeight:
clientHeight + overflow, if present.
scrollWidth:
clientWidth + overflow if present.
clientTop:
equals to elem.style.borderTopWidth
scrollTop:
number of pixels scrolled horizontally.
scrollLeft:
number of pixels scrolled vertically.
Element Methods
getClientBoundingRect:
x: left edges horizontal position (poor support do not use)
y: top edges vertical position (poor support do not use)
top: height > 0 ? y : y + height
bottom: height > 0 ? y + height : y
left: width > 0 ? x : x + width
right: width > 0 ? x + width : x
width: border-box width
height: border-box height
HTMLElement properties
offsetHeight:
content height + padding + border
offsetWidth:
content width + padding + border
offsetParent:
closest positioned anchestor
CSS values
htmlElement.style[camelCaseRule]:
returns only inline rules
getComputedStyle(element,[psudoElement]):
returns computed styles, example:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph {
height: 300px;
}
</style>
</head>
<body>
<p class="paragraph">words words words...</p>
<script>
const paragraph = document.querySelector(".paragraph");
const computedStyles = getComputedStyle(paragraph);
const computedHeight = computedStyles.getPropertyValue("height");
/* prints 300px */
console.log(computedHeight);
</script>
</body>
</html>Window properties
- scrollY | pageYOffset: amount scrolled on Y axis.
- scrollX | pageXOffset: amount scrolled on X axis.
- innerHeight: viewport height, hor scrollbar included, if present.
- innerWidth: viewport width, vert scrollbar included, if present.
- outerHeight: browser window height.
- outerWidth: browser window width.
- screenX: distance between browser window and top of the screen.
- screenY: distance between browser window and top of the screen.
- screen: interface that displays useful screen informations, screen.width, screen.height...
Html element Properties
on a standard html pages document.documentElement returns as an HTMLElement hence we can use Element properties and HTMLELement properties(see above).
For instance document.documentElement.scrollTop is equal to window.scrollY.