08-jquery's Location information

Source: Internet
Author: User

jquery location information with JS's client series, offset series, scroll series packaging a few simple API.

Width and height get width
. Width ()

Description: Gets the current calculated width value for the first element in the collection of matching elements. This method does not accept any parameters. .css(width) .width() The difference between and is that the latter returns a numeric value with no units (for example, 400 ) that returns a string with a full unit (for example, 400px ). It is recommended to use a method when the width of an element requires a mathematical calculation .width() .

Set Width
. width (value)

Description: Sets the CSS width for each matching element.

Height gain Height
. Height ()

Description: Gets the current calculated height value of the first element in the matching element collection.

    • This method does not accept any parameters.
Set height
. Height (value)

Description: Sets the height value of each matching element.

2, Innerheight () and innerwidth () get the internal width
. Innerwidth ()

Description: Gets the current calculated width value for the first element in the collection of matched elements, including padding, but does not include border.

PS: This method does not window document work with objects and can be used instead for these objects .width() .

Set Interior width
. innerwidth (value);

Description: Sets the inner width of the CSS for each element in the matching collection. If the "value" argument provides a number, jquery automatically adds the pixel unit (PX)

Get internal high
. Innerheight ()

Description: Gets the current calculated height value for the first element in the collection of matched elements, including padding, but does not include border.

PS: This method does not window document work with objects and can be used instead for these objects .height() .

Set Interior width
. innerheight (value);

Description: Sets the interior height of the CSS for each element in the matching collection. If the "value" argument provides a number, jquery automatically adds the pixel unit (PX)

3.outWidth and Outheight ()

Get External width
. Outerwidth ([Includemargin])

Description: Gets the current calculated external width (including padding,border and optional margin) of the first element in the matching element collection

    • Includemargin (default: false ) type: Boolean A Boolean value that indicates whether the margin value of the element is included in the calculation.
    • This method does not apply to window document objects and can be used .width() instead of
Set the external width
. Outerwidth (value)

Description: Sets the external width of the CSS for each element in the matching collection.

Get External width
. Outerheight ([Includemargin])

Description: Gets the current calculated external height (including padding,border and optional margin) of the first element in the matching element collection

    • Includemargin (default: false ) type: Boolean A Boolean value that indicates whether the margin value of the element is included in the calculation.
    • This method does not apply to window document objects and can be used .width() instead of
Set the external high
. Outerheight (value)

Description: Sets the external height of the CSS for each element in the matching collection.

3. Offset acquisition
. Offset ()

return value: Object. .offset()returns an top left object that contains and attributes.

Description: Gets the current coordinate of the first element in the matching element collection, relative to the document.

Note: jquery does not support getting the offset coordinates of hidden elements. Similarly, the border, margin, or padding information of hidden elements cannot be obtained. If the attribute of the element is set visibility:hidden , then we can still get its coordinates

Set up
. offset (coordinates)

Description: Sets the coordinates of each element in a matching element collection, relative to the document.

    • Coordinates type: An top left object that contains and attributes, with integers indicating the new top and left coordinates of the element.

Example:

$ ("P"). Offset ({top:10, left:30});

4. Element coordinates
. Position ()

return value:Object{top,left}

Describes getting the current coordinates of the first element in a matching element, relative to the coordinates of offset parent. (offset parent refers to the most recent and positioned ancestor element from the element)

Use it better when placing a new element near another element in the same container .position() .

5. Horizontal direction of scrolling distance is obtained:
. ScrollLeft ()

Description: Gets the position of the current horizontal scroll bar of the first element in the matching element collection (the width of the page roll away)

Set up:
. ScrollLeft (value)

Description: Sets the horizontal scroll bar position for each matched element.

Vertical direction Acquisition:
. ScrollTop ()

Description: Gets the position of the current hysteresis scrollbar of the first element in the matching element collection (the height of the page roll walk)

Set up:
. ScrollLeft (value)

Description: Sets the vertical scroll bar position for each matched element.

08-jquery's Location information

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.