DOM Traversal Methods

Dimensions Plug-In
•
relativeTo (optional): An HTML element representing the ancestor
element relative to which the matched element will be offset. Default is
document.body.
Parameters (Second Version)
•
options: A map of settings to configure the way the offset is calculated.
°
°
°
°
°
°
°
margin (optional): A Boolean indicating whether to include
the element's margin in the calculations. Default is true.
border (optional): A Boolean indicating whether to include
the element's border in the calculations. Default is false.
padding (optional): A Boolean indicating whether to include
the element's padding in the calculations. Default is false.
scroll (optional): A Boolean indicating whether to include
the scroll offsets of all ancestor elements in the calculations.
Default is true.
lite (optional): A Boolean indicating whether to use
offsetLite instead of offset. Default is false.
relativeTo (optional): An HTML element representing the
ancestor element relative to which the matched element will
be offset. Default is document.body.
returnObject: An object in which to store the return value.
When the second version of the method is used, the chain will
not be broken, and the result will be assigned to this object.
Return Value (First Version)
An object containing values for top, left, and optionally scrollTop
and scrollLeft.
Return Value (Second Version)
The jQuery object, for chaining purposes.
Description
The .offset method allows us to locate the top and left positions of any element
anywhere on the page, whether its position is static or relative, absolute or
fixed, and regardless of the position of scrollbars. With options for factoring margin,
border, padding, and scroll into the calculation, .offset() provides great flexibility
as well as accuracy.
The following series of images demonstrates the different values returned by
.offset() depending on how the options are set.
[ 208 ]