Summary of jquery methods for operating css styles, positions, and sizes

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:

Copy code The code is as follows:

$("p").css("color"); //Get the value of the color style attribute of the first paragraph 

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:

Copy code The code is as follows:

//1 Set the font color of all paragraphs to red and the background to blue 

$("p").css({ color: "#ff0011", background: "blue" }); 

//2 If the attribute name contains "-", quotation marks 
 must be used
$("p").css({ "margin-left": "10px", "background-color": "blue" }); 

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:

Copy code The code is as follows:

$("p").css("color","red"); //Set the font of all paragraphs to red

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:

Copy code The code is as follows:

/*
//Get the offset of the second segment
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:last");
var offset = p.offset();
p.html("left: " offset.left ", top: " offset.top);

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:

Copy code The code is as follows:

/*
//Get the offset of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
var position = p.position();
$("p:last").html("left: " position.left ", top: " position.top);

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:

Copy code The code is as follows:

/*
//Get the offset of the first segment relative to the top of the scroll bar
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("scrollTop:" p.scrollTop());

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:

Copy code The code is as follows:

$("div.demo").scrollTop(300);

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:

Copy code The code is as follows:

/*
//Get the offset of the first segment relative to the left side of the scroll bar
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("scrollLeft:" p.scrollLeft());

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:

Copy code The code is as follows:

$("div.demo").scrollLeft(300);

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:

Copy code The code is as follows:

/*
//Get the height of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
alert($("p").height());
//Get the height of the document
alert($(document).height());

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:

Copy code The code is as follows:

/*
//Set the height of all paragraphs to 20
Document fragment:

Hello

2nd Paragraph

*/
$("p").height(20);
alert($("p").height());

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

Copy code The code is as follows:

/*
//Get the width of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
alert($("p").width());

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:

Copy code The code is as follows:

/*
//Set the width of all paragraphs to 20
Document fragment:

Hello

2nd Paragraph

*/
$("p").width(20);
alert($("p").width());

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:

Copy code The code is as follows:

/*
//Get the height of the internal area of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("innerHeight:" p.innerHeight());

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:

Copy code The code is as follows:

/*
//Get the width of the internal area of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("innerWidth:" p.innerWidth());

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:

Copy code The code is as follows:

/*
//Get the external height of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("outerHeight:" p.outerHeight() " , outerHeight(true):" p.outerHeight(true));

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:

Copy code The code is as follows:

/*
//Get the outer width of the first paragraph
Document fragment:

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("outerWidth:" p.outerWidth() " , outerWidth(true):" p.outerWidth(true));

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.

Summary of jquery methods for operating css styles, positions, and sizes_jquery