Home >Web Front-end >JS Tutorial >Summary of jquery methods for operating css styles, positions, and sizes_jquery
1. CSS
1. css(name)
Access the style attribute of the first matching element.
Return value String
Parameters
name (String): The name of the attribute to be accessed
Example:
2. css(properties)
Set a name/value pair object as the style attribute of all matching elements. This is the best way to set a large number of style properties on all matching elements.
Return value jQuery
Parameters
properties (Map) : Name/value pairs to set as style properties
Example:
3. css(name,value)
Set the value of a style attribute on all matching elements. Numbers will automatically be converted to pixel values
Return value jQuery
Parameters
name (value): attribute name
value (String, Number): attribute value
Example:
2. Location
1. offset()
Get the relative offset of the matching element in the current view window. The returned object contains two integer properties: top and left.
Note: This method only works on visible elements.
Return value Object{top,left}
Example:
Hello
2nd Paragraph
2. position()
Get the offset of the matching element relative to the parent element.
The returned object contains two integer properties: top and left. For accurate calculations, use pixel units for filler, border, and fill properties. This method only works on visible elements.
Return value Object{top,left}
Example:
Hello
2nd Paragraph
3. scrollTop()
Get the offset of the matched element relative to the top of the scroll bar.
Note: This method works for both visible and hidden elements.
Return value Integer
Example:
Hello
2nd Paragraph
4. scrollTop(val)
When passing parameter value, set the top offset of the scroll bar to this value. This method works for both visible and hidden elements.
Return value jQuery
Example:
5. scrollLeft()
Get the offset of the matched element relative to the left side of the scroll bar. This method works for both visible and hidden elements.
Return value Integer
Example:
Hello
2nd Paragraph
6. scrollLeft(val)
When passing parameter value, set the left offset of the scroll bar to this value. This method works for both visible and hidden elements.
Return value jQuery
Example:
3. Size
1. height()
Get the currently calculated height value (px) of the first matching element. After jQuery 1.2, it can be used to get the height of window and document
Return value Integer
Example:
Hello
2nd Paragraph
2. height(val)
Sets the value of the CSS height (hidth) property for each matched element. If the unit is not specified explicitly (e.g. em or %), px is used. If the unit is not specified explicitly (e.g. em or %), px is used.
Return value jQuery
Parameters
val (String, Number): Set the value of 'height' in CSS
Example:
Hello
2nd Paragraph
3. width()
Get the currently calculated width value (px) of the first matching element. After jQuery 1.2, it can be used to get the width of window and document
Return value Integer
Example: 0
Hello
2nd Paragraph
4. width(val)
Sets the value of the CSS width property for each matched element. If the unit is not specified explicitly (e.g. em or %), px is used.
Return value jQuery
Parameters
val (String, Number): Set the CSS 'width' property value
Example:
Hello
2nd Paragraph
5. innerHeight()
Get the height of the internal area of the first matching element (including padding and excluding borders). This method works for both visible and hidden elements.
Return value Integer
Example:
Hello
2nd Paragraph
7. innerWidth()
Get the width of the internal area of the first matching element (including padding and excluding borders). This method works for both visible and hidden elements.
Return value Integer
Example:
Hello
2nd Paragraph
7. outerHeight(options)
Get the outer height of the first matching element (default includes padding and border). This method works for both visible and hidden elements.
Return value Integer
Parameters
options(Boolean): (false) When set to true, margins are included in the calculation.
Example:
Hello
2nd Paragraph
8. outerHeight(options)
Get the outer width of the first matching element (default includes padding and border). This method works for both visible and hidden elements.
Return value Integer
Parameters
options(Boolean): (false) When set to true, margins are included in the calculation.
Example:
Hello
2nd Paragraph
The above is the entire content of jQuery operating CSS styles, positions, and sizes. It is purely a personal summary. If there are any omissions or errors, please let us know. This article will continue to be updated.