[JQuery User Manual] 6: CSS

Vi. CSS

Css (name) Return Value: String

Access the style attribute of the First Matching Element. Example: obtain the value of the color element attribute of the first section.

1 jQuery code:
2 $ ("p" ).css ("color ");

 Css (properties) Return Value: jQuery

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 styles on all matching elements. Example: Set the font color of all paragraphs to red and the background color to blue.

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

For example, if the attribute name contains "-", quotation marks must be used:

1 jQuery code:
2 $ ("p" ).css ({"margin-left": "10px", "background-color": "blue "});

 Css (name, value) Return value: jQuery

Set the value of a style attribute among all matching elements. The number is automatically converted to the pixel value. Example: Set the font of all paragraphs to red.

1 jQuery code:
2 $ ("p" ).css ("color", "red ");

 Css (name, function (index, value) Return value: jQuery

Set the value of a style attribute among all matching elements. The number is automatically converted to the pixel value. Example: gradually increase the div size.

Code

1 jQuery code:
2 $ ("div"). click (function (){
3 $ (this). css ({
4 width: function (index, value ){
5 return parseFloat (value) * 1.2;
6 },
7 height: function (index, value ){
8 return parseFloat (value) * 1.2;
9}
10 });
11 });

 Offset () Return Value: Object {top, left}

Obtains the relative offset of the matching element in the current window. The returned object contains two integer attributes: top and left. This method is only valid for visible elements. Example: Get the offset.

1. HTML code:
2 <p> Hello </p> <p> 2nd Paragraph </p>
3 jQuery code:
4 var p = $ ("p: last ");
5 var offset = p. offset ();
6 p.html ("left:" + offset. left + ", top:" + offset. top); 7 results: 8 <p> Hello </p> <p> left: 0, top: 35 </p>

 Offset (coordinates) Return Value: jQuery

Set the coordinates of the matching element relative to the document Object .. The offset () method can reset the element position. The position of this element is relative to the document Object. If the original position style attribute is static, it will be changed to relative to achieve relocation. Example: Set the offset of the second segment.

1. HTML code:
2 <p> Hello </p> <p> 2nd Paragraph </p>
3 jQuery code;
4 $ ("p: last"). offset ({top: 10, left: 30 });

 Position () Return Value: Object {top, left}

Obtains the offset of a matched element from its parent element. The returned values include top and left attributes. For precise calculation results, use pixel units for padding, border, and padding. This method is only valid for visible elements.

Code

1. HTML code:
2 <p> Hello </p> <p> 2nd Paragraph </p>
3 jQuery code;
4 var p = $ ("p: first ");
5 var position = p. position ();
6 $ ("p: last") hitml ("left:" + position. left + ", top:" + position. top );
7 results:
8 <p> Hello </p> <p> left: 15, top: 15 </p>

ScrollTop () Return Value: Integer

Obtains the offset of the matching element relative to the top of the scroll bar. This method is effective for both visible and hidden elements. Example: Get the offset of the First Section on the top of the scroll bar.

1. HTML code:
2 <p> Hello </p> <p> 2nd Paragraph </p>
3 jQuery code:
4 var p = $ ("p: first ");
5 $ ("p: last"). text ("scrollTop:" + p. scrollTop ());
6 results:
7 <p> Hello </p> <p> scrollTop: 0 </p>

ScrollTop (val) Return Value: jQuery

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

1 jQuery code:
2 $ ("div. demo"). scrollTop (300 );

ScrollLeft () Return Value: integer

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

ScrollLeft (val) Return Value: jQuery

When passing parameters, set the left offset of the horizontal scroll bar to change. This method is effective for both visible and hidden elements.

Height () Return Value: Integer

Obtains the current calculated height (px) of the First Matching Element ). After jQuery1.2, it can be used to obtain the height of window and doucument.

Example: Obtain the height of the first segment.

1 jQuery code:
2 $ ("p"). height ();

Example: Get the height of the current browser window.

1 jQuery code:
2 $ (window). height ();

Example: Get the height of the current HTML document.

1 jQuery code:
2 $ (document). height ();

 Height (val) Return Value: jQuery

Set the CSS height attribute value for each matching element. If you do not explicitly know the unit (such as em or %), use px. Parameter val type: String, Number, Function.

Example: Set the height of all paragraphs to 20.

1 jQuery code:
2 $ ("p"). height (20 );

 Width () Return Value: Integer

Obtains the current calculated width (px) of the First Matching Element ). After jQuery1.2, the width of the window and document can be obtained. For example, see height ().

Width (val) Return Value: jQuery

Set the CSS width attribute value for each matching element. If the unit is not explicitly specified, px is used. For example, see height (val ).

InnerHeight () Return Value: Integer

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.

InnerWidth () Return Value: Integer

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.

OuterHeight (options) Return Value: Integer

Obtain the external height of the First Matching Element (including the padding and border by default ). If options is true, the margin is included.

OuterWidth (options) Return Value: Integer

Obtain the external width of the First Matching Element (including the padding and border by default ). If options is true, the margin is included.