How to operate css styles, positions, and dimensions using jquery _ jquery

This article summarizes some jQuery methods for operating CSS styles, positions, and sizes, which are comprehensive and meticulous and recommended to those who need them. I. CSS

1. css (name)

Access the style attribute of the First Matching Element.
Return Value String
Parameters
Name (String): name of the attribute to be accessed
Example:

The Code is as follows:

$ ("P" ).css ("color"); // obtain the value of the color Style attribute of the first section.

2. css (properties)

Set a "name/value pair" object to the style attribute of all matching elements. This is the best way to set a large number of style attributes on all matching elements.
Returned value jQuery
Parameters
Properties (Map): name/value pair to be set as a style Property
Example:

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 among all matching elements. The number is automatically converted to the pixel value.
Returned value jQuery
Parameters

Name (value): attribute name
Value (String, Number): Attribute value
Example:

The Code is as follows:

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

Ii. Location

1. offset ()

Obtains the relative offset of the matching element on the current window port. The returned object contains two integer attributes: top and left.
Note: This method is only valid for visible elements.
Returned Object {top, left}
Example:

The Code is as follows:

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

Hello

2nd Paragraph

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

2. position ()

Obtains the offset of a matched element from its parent element.
The returned object contains two integer attributes: top and left. For precise calculation results, use the pixel unit in the padding, border, and fill attributes. This method is only valid for visible elements.
Returned Object {top, left}
Example:

The Code is as follows:

/*
// Obtain the first offset.
Document snippets:

Hello

2nd Paragraph

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

3. scrollTop ()

Obtains the offset of the matching element relative to the top of the scroll bar.
Note: This method is valid for both visible and hidden elements.
Return value Integer
Example:

The Code is as follows:

/*
// Obtain the offset of the first segment relative to the top of the scroll bar.
Document snippets:

Hello

2nd Paragraph

*/
Var p = $ ("p: first ");
$ ("P: last"). text ("scrollTop:" + p. scrollTop ());

4. scrollTop (val)

When passing the parameter value, set the offset at the top of the scroll bar to this value. This method is effective for both visible and hidden elements.
Returned value jQuery
Example:

The Code is as follows:

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

5. scrollLeft ()

Returns the offset of the matching element to the left of the scroll bar. This method is effective for both visible and hidden elements.
Return value Integer
Example:

The Code is as follows:

/*
// Obtain the offset of the first segment relative to the left of the scroll bar
Document snippets:

Hello

2nd Paragraph

*/
Var p = $ ("p: first ");
$ ("P: last"). text ("scrollLeft:" + p. scrollLeft ());

6. scrollLeft (val)

When passing the parameter value, set the left offset of the scroll bar to this value. This method is effective for both visible and hidden elements.
Returned value jQuery
Example:

The Code is as follows:

("P. demo"). scrollLeft (300 );

3. Dimensions

1. height ()

Obtains the current calculated height (px) of the First Matching Element ). After jQuery 1.2, it can be used to obtain the height of the window and document.
Return value Integer
Example:

The Code is as follows:

/*
// Obtain the height of the first segment
Document snippets:

Hello

2nd Paragraph

*/
Alert ($ ("p"). height ());
// Obtain the document height
Alert ($ (document). height ());

2. height (val)

Set the CSS height (hidth) attribute value for each matching element. If the unit (such as em or %) is not explicitly specified, px is used. If the unit (such as em or %) is not explicitly specified, px is used.
Returned value jQuery
Parameters
Val (String, Number): sets the 'height' value in CSS.
Example:

The Code is as follows:

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

Hello

2nd Paragraph

*/
$ ("P"). height (20 );
Alert ($ ("p"). height ());

3. width ()

Obtains the current calculated width (px) of the First Matching Element ). After jQuery 1.2, it can be used to obtain the width of the window and document.
Return value Integer
Example: 0

The Code is as follows:

/*
// Obtain the width of the first segment
Document snippets:

Hello

2nd Paragraph

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

4. width (val)

Set the CSS width attribute value for each matching element. If the unit (such as em or %) is not explicitly specified, px is used.
Returned value jQuery
Parameters
Val (String, Number): sets the attribute value of CSS 'width '.
Example:

The Code is as follows:

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

Hello

2nd Paragraph

*/
$ ("P"). width (20 );
Alert ($ ("p"). width ());

5. innerHeight ()

Obtain the height of the interior area of the First Matching Element (including the padding and not the border ). This method is effective for both visible and hidden elements.
Return value Integer
Example:

The Code is as follows:

/*
// Obtain the height of the area inside the first paragraph
Document snippets:

Hello

2nd Paragraph

*/
Var p = $ ("p: first ");
$ ("P: last"). text ("innerHeight:" + p. innerHeight ());

7. innerWidth ()

Obtain the width of the area inside the First Matching Element (including the padding and not the border ). This method is effective for both visible and hidden elements.
Return value Integer
Example:

The Code is as follows:

/*
// Obtain the width of the area inside the first paragraph
Document snippets:

Hello

2nd Paragraph

*/
Var p = $ ("p: first ");
$ ("P: last"). text ("innerWidth:" + p. innerWidth ());

7. outerHeight (options)

Obtain the external height of the First Matching Element (including the padding and border by default ). This method is effective for both visible and hidden elements.
Return value Integer
Parameters
Options (Boolean): When (false) is set to true, the margin is included.
Example:

The Code is as follows:

/*
// Obtain the external height of the first paragraph
Document snippets:

Hello

2nd Paragraph

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

8. outerHeight (options)

Obtain the external width of the First Matching Element (including the padding and border by default ). This method is effective for both visible and hidden elements.
Return value Integer
Parameters
Options (Boolean): When (false) is set to true, the margin is included.
Example:

The Code is as follows:

/*
// Obtain the external width of the first paragraph
Document snippets:

Hello

2nd Paragraph

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

The above is all about jQuery's CSS style, position, and size. It is a personal summary. If you have any omissions or errors, please let us know. This article will be updated continuously.