Element#getDimensions() → Object

Finds the computed width and height of element and returns them as key/value pairs of an object.

For backwards-compatibility, these dimensions represent the dimensions of the element's "border box" (including CSS padding and border). This is equivalent to the built-in offsetWidth and offsetHeight browser properties.

Note that all values are returned as numbers only although they are expressed in pixels.

Caveats

• If the element is hidden via display: none in CSS, this method will attempt to measure the element by temporarily removing that CSS and applying visibility: hidden and position: absolute. This gives the element dimensions without making it visible or affecting the positioning of surrounding elements — but may not give accurate results in some cases. Element.measure is designed to give more accurate results.

• In order to avoid calling the method twice, you should consider caching the returned values in a variable, as shown in the example below.

• For more complex use cases, use Element.measure, which is able to measure many different aspects of an element's dimensions and offsets.

Examples

<div id="rectangle" style="font-size: 10px; width: 20em; height: 10em"></div>

Then:

var dimensions = $('rectangle').getDimensions();
// -> {width: 200, height: 100}
 dimensions.width;
// -> 200
 dimensions.height;
// -> 100

This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.