jquery Controls CSS Styles

First, CSS
1. CSS (name)
Accesses the style properties of the first matching element.
return value String
Parameters
Name (String): The name of the property to access
Example:
$ ("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 attribute 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 set as style properties
Example:

1 sets 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:
$ ("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 shaping properties: Top and left.
Note: This method is only valid for visible elements.
return value Object{top,left}
Example:

/*
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 shaping properties: Top and left. To calculate the results accurately, use pixel units on the padding, border, and fill properties. This method is valid only for visible elements.
return value Object{top,left}
Example:

/*
Get 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 match element at the top of the scroll bar.
Note: This method is valid for both visible and hidden elements.
return value Integer
Example:

/*
Gets the offset from the top of the first paragraph relative to 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:
$ ("Div.demo"). scrolltop (300);
5, ScrollLeft ()
Gets the offset to the left of the matching element relative to the scrollbar. This method is valid for both visible and hidden elements.
return value Integer
Example:

/*
Gets the offset to the left of the first paragraph relative to 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 scrollbar to that value. This method is valid for both visible and hidden elements.
return value JQuery
Example:
$ ("Div.demo"). ScrollLeft (300);
Three, size
1. Height ()
Gets the height value (px) that is currently computed for the first matching element. After JQuery 1.2 can be used to get window and document the high
return value Integer
Example:

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

Gets the document's high
Alert (document). Height ());
2. Height (val)
Sets the value of the CSS height (hidth) property for each matching element. If no units are explicitly specified (for example: EM or%), use PX. If no units are explicitly specified (for example: EM or%), use PX.
return value JQuery
Parameters
Val (String, number): Sets the value of ' height ' in CSS
Example:

/*
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. After JQuery 1.2 can be used to obtain the width of window and document
return value Integer
Example: 0

/*
Gets 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 units are explicitly specified (for example: EM or%), use PX.
return value JQuery
Parameters
Val (String, number): Sets the property value of CSS ' width '
Example:

/*
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 inner area height of the first matched element (including padding, excluding borders). This method is valid for both visible and hidden elements.
return value Integer
Example:

/*
Gets the first paragraph inner area height
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 matched element (including padding, excluding borders). This method is valid for both visible and hidden elements.
return value Integer
Example:

/*
Gets the first paragraph inner area width
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 (including padding and borders by default). This method is valid for both visible and hidden elements.
return value Integer
Parameters
Options (Boolean): (false) When set to True, the margin is calculated.
Example:

/*
Get the first paragraph outer height
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 outer width of the first matching element, including padding and borders by default. This method is valid for both visible and hidden elements.
return value Integer
Parameters
Options (Boolean): (false) When set to True, the margin is calculated.
Example:

/*
Get the first paragraph outer 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));  

jquery Controls CSS Styles