The following functions are treated as Element methods.

• Online Tutorial/Demo

Exposes an element for measurement in a way the user cannot see and then restores it's state after the measurement.

element.measure(fn);

1. fn - (function) a function to run while the element is visible (but not to the user); bound to the element by default.

var size = myHiddenElement.measure(function(){
    return this.getSize();
});

• mixed - whatever the passed in function returns.

• You cannot ascertain the location or size for an element whose display style is 'none'. With this method, the element is set to display:block, position:absolute, and visibility:hidden and then the function passed is applied. Then the element is restored to it's previous state. This allows you to safely measure the element even if it is hidden.
• This method was authored by Daniel Steigerwald and granted use by the MIT License.

Returns width and height for element even if the element is not visible.

element.getDimensions([options]);

1. options - (object; optional) a key/value set of options

1. computeSize - (boolean) use Element:getComputedSize or not; defaults to false
2. styles - (array) see Element:getComputedSize
3. planes - (array) see Element:getComputedSize

• (object) An object with .x and .y defined as numbers. If options.computeSize is true, returns all the values that Element:getComputedSize returns.

$('myElement').getDimensions();
//returns {width: #, height: #}
$('myElement').getDimensions(true);
//returns the getComputedSize object; see getComputedSize

Calculates the size of an element including the width, border, padding, etc.

element.getComputedSize([options]);

1. options - (object) an object with key/value options

1. styles - (array) the styles to include in the calculation; defaults to ['padding','border']
2. planes - (object) an object with height and width properties, each of which is an array including the edges to include in that plane. defaults to {height: ['top','bottom'], width: ['left','right']}
3. mode - (string) limit the plane to 'vertical' or 'horizontal'; defaults to 'both'

• (object) An object that contains dimension values (numbers); see list below

• width - the actual width of the object (not including borders or padding)
• height - the actual height of the object (not including borders or padding)
• border-* width - (where * is top, right, bottom, and left) the width of the border on that edge
• padding-* - (where * is top, right, bottom, and left) the width of the padding on that edge
• computed* - (where * is Top, Right, Bottom, and Left; e.g. computedRight - case sensitive) the width of all the styles on that edge computed (so if options.styles remains unchanged with the default padding and border, computedRight is the sum of border-right-width and padding-right)
• totalHeight - the total sum of the height plus all the computed styles on the top or bottom. By default this is just padding and border, but if you were to specify in the styles option margin, for instance, the totalHeight calculated would include the margin.
• totalWidth - same as totalHeight, only using width, left, and right

$(el).getComputedSize();

An object with all the style properties as well as summed properties (like totalWidth).

{
    'padding-top': 0,
    'border-top-width': 1,
    'padding-bottom': 0,
    'border-bottom-width': 1,
    'padding-left': 0,
    'border-left-width': 1,
    'padding-right': 0,
    'border-right-width': 1,
    'width': 100,
    'height': 100,
    'totalHeight': 102,
    'computedTop': 1,
    'computedBottom': 1,
    'totalWidth': 102,
    'computedLeft': 1,
    'computedRight': 1
}