Exposes an element for measurement in a way the user cannot see and then restores it's state after the measurement.
Syntax
element.measure(fn);
Arguments
fn - (function) a function to run while the element is visible (but not to the user); bound to the element by default.
Example
var size = myHiddenElement.measure(function(){returnthis.getSize();
});
Returns
mixed - whatever the passed in function returns.
Notes
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.
Calculates the size of an element including the width, border, padding, etc.
Syntax
element.getComputedSize([options]);
Arguments
options - (object) an object with key/value options
Options
styles - (array) the styles to include in the calculation; defaults to ['padding','border']
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']}
mode - (string) limit the plane to 'vertical' or 'horizontal'; defaults to 'both'
Returns
(object) An object that contains dimension values (numbers); see list below
Dimension Values Returned
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
Example
$(el).getComputedSize();
Returns
An object with all the style properties as well as summed properties (like totalWidth).