Namespace: Elements:measureHiddenDimensions

Elements:measureHiddenDimensions

Methods

measureHiddenDimensions(node, methodopt, nullable, selectoropt, nullable, contextopt, nullable) → {Object.<String, Number>}

Measures hidden elements by using a sandbox div. In some layout situations you may not be able to measure hidden or especially detached elements correctly, sometimes simply because they are not rendered, other times because they are rendered in a context where the browser does not keep correct styling information due to optimizations considering visibility of the element.

This method works by cloning a node and inserting it in a well hidden sandbox element for the time of the measurement, after which the sandbox is immediately removed again. This method allows you to measure "hidden" elements inside the DOM without the need to actually move elements around or show them visibly.

Keep in mind, that only measurements inherent to the element itself are measurable if sandbox is inserted into the body. Layout information from surrounding containers is, of course, not available. You can remedy this by setting the context correctly. Keep in mind, that direct child selectors may not work in the context since the sandbox itself constitutes a new level between context and element. In these cases you might have to adapt you selectors.

Parameters:
Name Type Attributes Default Description
node HTMLElement

the element to measure

method String <optional>
<nullable>
'outer'

the kind of measurement to take, allowed values are "outer"/"offset", "inner"/"client" or "scroll"

selector String <optional>
<nullable>
null

selector to apply to element to find target

context HTMLElement <optional>
<nullable>
document.body

context to use as container for measurement

Source:
See:
Throws:

error if node is not a usable HTML element

Returns:
a plain object holding width and height measured according to the defined method
Type
Object.<String, Number>
Example
measureHiddenDimensions(document.body.querySelector('div.hidden:first'), 'inner');
measureHiddenDimensions(document.body, 'outer, 'div.hidden:first', document.body.querySelector('main'));