Element
- absolutize
- addClassName
- addMethods
- adjacent
- ancestors
- childElements
- classNames
- cleanWhitespace
- clonePosition
- cumulativeOffset
- cumulativeScrollOffset
- descendantOf
- descendants
- down
- empty
- extend
- fire
- firstDescendant
- getDimensions
- getElementsByClassName
- getElementsBySelector
- getHeight
- getOffsetParent
- getStyle
- getWidth
- hasClassName
- hide
- identify
- immediateDescendants
- insert
- inspect
- makeClipping
- makePositioned
- match
- next
- nextSiblings
- observe
- positionedOffset
- previous
- previousSiblings
- readAttribute
- recursivelyCollect
- relativize
- remove
- removeClassName
- replace
- scrollTo
- select
- setOpacity
- setStyle
- show
- siblings
- stopObserving
- toggle
- toggleClassName
- undoClipping
- undoPositioned
- up
- update
- viewportOffset
- visible
- wrap
- writeAttribute
getDimensions
getDimensions(element) -> {height: Number, width: Number}
Finds the computed width
and height
of element
and returns them as key/value pairs of an object.
This method returns correct values on elements whose display is set to none
either in an inline style rule or in an CSS stylesheet.
In order to avoid calling the method twice, you should consider caching the values returned in a variable as shown below. If you only need element
’s width or height, consider using Element.getWidth
or Element.getHeight
instead.
Note that all values are returned as numbers only although they are expressed in pixels.
Examples
<div id="rectangle" style="font-size: 10px; width: 20em; height: 10em"></div>
var dimensions = $('rectangle').getDimensions();
// -> {width: 200, height: 100}
dimensions.width;
// -> 200
dimensions.height;
// -> 100