Jquery controls css styles and jquerycss styles

Jquery controls css styles and jquerycss styles

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:
$ ("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:

// 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:
$ ("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:

/*
// Get the offset of the second segment
<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 ()
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:

/*
// Obtain the first offset.
<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 ()
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:

/*
// Obtain the offset of the first segment relative to the top of the scroll bar.
<P> Hello </p> <p> 2nd Paragraph </p>
*/
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:
$ ("Div. 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:

/*
// Obtain the offset of the first segment relative to the left of the scroll bar
<P> Hello </p> <p> 2nd Paragraph </p>
*/

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:
$ (& Quot; div. demo & quot;). 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:

/*
// Obtain the height of the first segment
<P> Hello </p> <p> 2nd Paragraph </p>
*/
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:

/*
// Set the height of all paragraphs to 20
<P> Hello </p> <p> 2nd Paragraph </p>
*/
$ ("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

/*
// Obtain the width of the first segment
<P> Hello </p> <p> 2nd Paragraph </p>
*/

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:

/*
// Set the width of all paragraphs to 20
<P> Hello </p> <p> 2nd Paragraph </p>
*/
$ ("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:

/*
// Obtain the height of the area inside the first paragraph
<P> Hello </p> <p> 2nd Paragraph </p>
*/
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:

/*
// Obtain the width of the area inside the first paragraph
<P> Hello </p> <p> 2nd Paragraph </p>
*/
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:

/*
// Obtain the external height of the first paragraph
<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)
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:

/*
// Obtain the external width of the first paragraph
<P> Hello </p> <p> 2nd Paragraph </p>
*/
Var p = $ ("p: first ");
$ ("P: last"). text ("outerWidth:" + p. outerWidth () + ", outerWidth (true):" + p. outerWidth (true ));