JS-Measure

DEMO

JS DOM Measurement Tools

Provides safe cross-browser support for fetching measurments about DOM elements

Functions

documentHeight()

Fetches the maximum height of your webpage by using the document body and the html element.
Returns 0 if the document or html element do not exist.

windowWidth()

Fetches the width of the window.
Returns 0 if the window and document element do not exist

windowHeight()

Fetches the height of the window.
Returns 0 if the window and document element do not exist

scrollTopDistance()

Fetches the distance of the viewport from the top of the page.
Returns 0 if the window and document element do not exist

scrollLeftDistance(element)

Fetches the distance of the viewport from the left of the page or the distance of the left side of element from the left side of the viewport.
Returns 0 if the window and document element do not exist

height(element, includeMargin)

Fetches the height of the element passed to the function. The second parameter can be used to fetch the total height with any margins

rawHeight(element)

This is the raw height function for maximum performance

rawHeightWithMargin(element)

This is the raw height with margin function for maximum performance

width(element, includeMargin)

Fetches the width of the element passed to the function The second parameter can be used to fetch the total width with any margins

rawWidth(element)

This is the raw height function for maximum performance

rawWidthWithMargin(element)

This is the raw width with margin function for maximum performance

topEdgeDistance(element: Element, relativeTo?: 'document' | Element)

Fetches the distance of the top of the element passed to the function from the top of the viewport. If relativeTo is passed document, it will use the distance from the top of the document. If you pass any Element to relativeTo, it will return the distance between the top of element and the top of relativeTo.

bottomEdgeDistance(element: Element, relativeTo?: 'document' | Element)

Fetches the distance of the bottom of the element passed to the function from the top of the viewport. If relativeTo is passed document, it will use the distance from the top of the document. If you pass any Element to relativeTo, it will return the distance between the bottom of element and the bottom of relativeTo.

leftEdgeDistance(element: Element, relativeTo?: 'document' | Element)

Fetches the distance of the left edge of the element passed to the function from the left of the viewport. If relativeTo is passed document, it will use the distance from the left of the document. If you pass any Element to relativeTo, it will return the distance between the left edge of element and the left edge of relativeTo.

rightEdgeDistance(element: Element, relativeTo?: 'document' | Element)

Fetches the distance of the right edge of the element passed to the function from the right of the viewport. If relativeTo is passed document, it will use the distance from the right of the document. If you pass any Element to relativeTo, it will return the distance between the right edge of element and the right edge of relativeTo.

inViewport(element)

Returns true if all edges of the element passed to the function are inside of the viewport