jquery operations CSS style, location, dimension method Rollup _jquery

First, CSS

1, CSS (name)

Accesses the style properties of the first matching element.
return value String
Parameters
Name (String): Property names to access
Example:

Copy Code code as follows:

$ ("P"). CSS ("color"); Gets the value of the color style property of the first paragraph

2, CSS (properties)

Sets a "name/value pair" object to the style properties of all matching elements. This is the best way to set a large number of style attributes on all matching elements.
return value JQuery
Parameters
Properties (MAP): name/value pairs to be set to style properties
Example:

Copy Code code 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 property name contains "-", you must use quotation marks
$ ("P"). css ({"Margin-left": "10px", "Background-color": "Blue"});

3, CSS (Name,value)

In all matching elements, set the value of a style property. Numbers are automatically converted to pixel values
return value JQuery
Parameters

Name (value): Property name
Value (String, Number): property value
Example:

Copy Code code as follows:

$ ("P"). CSS ("Color", "red"); Set all paragraph fonts to red

Second, location

1, offset ()

Gets the relative offset of the matching element in the current viewport window. The returned object contains two cosmetic properties: Top and left.
Note: This method is only valid for visible elements.
return value Object{top,left}
Example:

Copy Code code as follows:

/*
Gets the offset of the second paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:last");
var offset = P.offset ();
P.html ("Left:" + Offset.left + ", Top:" + offset.top);

2, Position ()

Gets the offset of the matching element relative to the parent element.
The returned object contains two cosmetic properties: Top and left. To accurately calculate the results, use pixel units on the filler, border, and fill properties. This method is valid only for visible elements.
return value Object{top,left}
Example:

Copy Code code as follows:

/*
Gets the offset of the first paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
var position = p.position ();
$ ("P:last"). HTML ("Left:" + Position.left + ", Top:" + position.top);

3, ScrollTop ()

Gets 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:

Copy Code code as follows:

/*
Gets the offset of the first paragraph relative to the top of the scroll bar
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
$ ("P:last"). Text ("ScrollTop:" + p.scrolltop ());

4, ScrollTop (Val)

When you pass a parameter value, set the top offset of the scroll bar to that value. This method is valid for both visible and hidden elements.
return value JQuery
Example:

Copy Code code as follows:

$ ("Div.demo"). scrolltop (300);

5, ScrollLeft ()

Gets the offset of the matching element relative to the left side of the scroll bar. This method is valid for both visible and hidden elements.
return value Integer
Example:

Copy Code code as follows:

/*
Gets the offset of the first paragraph relative to the left of the scroll bar
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
$ ("P:last"). Text ("ScrollLeft:" + p.scrollleft ());

6, ScrollLeft (Val)

When you pass a parameter value, set the left offset of the scroll bar to that value. This method is valid for both visible and hidden elements.
return value JQuery
Example:

Copy Code code as follows:

$ ("Div.demo"). ScrollLeft (300);

Third, size

1, Height ()

Gets the height value (px) of the current calculation of the first matching element. Can be used after jQuery 1.2 to get the window and document high
return value Integer
Example:

Copy Code code as follows:

/*
Get the height of the first paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
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 matching element. If no specified unit (such as: EM or%), use PX. If no specified unit (such as: EM or%), use PX.
return value JQuery
Parameters
Val (String, number): Setting the value of ' height ' in CSS
Example:

Copy Code code as follows:

/*
Set the height of all paragraphs to 20
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
$ ("P"). Height (20);
Alert ($ ("P"). Height ());

3, Width ()

Gets the width value (px) currently computed for the first matching element. Can be used after jQuery 1.2 to get the width of Windows and document
return value Integer
Example: 0

Copy Code code as follows:

/*
Get the width of the first paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
Alert ($ ("P"). width ());

4, Width (val)

Sets the value of the CSS width property for each matching element. If no specified unit (such as: EM or%), use PX.
return value JQuery
Parameters
Val (String, number): Setting the attribute value of the CSS ' width '
Example:

Copy Code code as follows:

/*
Set the width of all paragraphs to 20
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
$ ("P"). Width (20);
Alert ($ ("P"). width ());

5, Innerheight ()

Gets the height of the inner area of the first matching element (including padding, excluding borders). This method is valid for both visible and hidden elements.
return value Integer
Example:

Copy Code code as follows:

/*
Get inner area height of first paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
$ ("P:last"). Text ("Innerheight:" + p.innerheight ());

7, Innerwidth ()

Gets the inner area width of the first matching element (including padding, excluding borders). This method is valid for both visible and hidden elements.
return value Integer
Example:

Copy Code code as follows:

/*
Get inner area width of first paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
$ ("P:last"). Text ("Innerwidth:" + p.innerwidth ());

7, Outerheight (options)

Gets the outer height of the first matching element (the default includes padding and borders). This method is valid for both visible and hidden elements.
return value Integer
Parameters
Options (Boolean): (false) When set to true, the margins are calculated.
Example:

Copy Code code as follows:

/*
Get the outer height of the first paragraph
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
$ ("P:last"). Text ("Outerheight:" + p.outerheight () + ", Outerheight (True):" + P.outerheight (true));

8, Outerheight (options)

Gets the external width of the first matching element (the default includes padding and borders). This method is valid for both visible and hidden elements.
return value Integer
Parameters
Options (Boolean): (false) When set to true, the margins are calculated.
Example:

Copy Code code as follows:

/*
Get the first paragraph external width
Document fragment: <p>hello</p><p>2nd paragraph</p>
*/
var p = $ ("P:first");
$ ("P:last"). Text ("Outerwidth:" + p.outerwidth () + ", Outerwidth (True):" + P.outerwidth (true));

The above is jquery operation CSS style, location, size of the entire content, is purely personal summary, if there are omissions or errors, but also please inform, this article will continue to update.