Methods for obtaining element size and coordinates in jquery_jquery

1. Obtain coordinates

1.offset()

offset() method returns or sets the offset (position) of the matching element relative to the document. (i.e., viewport coordinates)

The object returned by this method contains two integer properties: top and left, measured in pixels.

This method only works for visible elements.

2.position()

position() method returns the position (offset) of the matching element relative to the parent element. (Document coordinates relative to the parent element)

The object returned by this method contains two integer properties: top and left, measured in pixels.

This method only works for visible elements.

3.offsetParent()

The offsetParent() method returns the nearest ancestor positioned element.

A positioned element refers to an element whose CSS position property is set to relative, absolute, or fixed.

Position can be set through jQuery, or through the CSS position property.

2. Get the size

1.width() and height() methods

width() method sets or returns the width of the element (not including padding, borders, or margins). The

height() method sets or returns the height of an element (not including padding, borders, or margins).

2. innerWidth() and innerHeight() methods

innerWidth() method returns the width of the element (including padding).

The innerHeight() method returns the height of the element (including padding).

3. outerWidth() and outerHeight() methods

outerWidth() method returns the width of the element (including padding and border).

outerHeight() method returns the height of the element (including padding and border).

outerWidth(true) method returns the width of the element (including padding, border and margin).

outerHeight(true) method returns the height of the element (including padding, border and margin).