- Source:
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:
- Type
- Object.<String, Number>
Example
measureHiddenDimensions(document.body.querySelector('div.hidden:first'), 'inner');
measureHiddenDimensions(document.body, 'outer, 'div.hidden:first', document.body.querySelector('main'));