Juqery 6 CSS-css, position, width and height

Css (name)
Access the style attribute of the First Matching Element.

--------------------------------------------------------------------------------

Return a style property on the first matched element.
Return Value
String

Parameters
Name (String): name of the attribute to be accessed

Example
Obtains the value of the color Style attribute of the first section.

JQuery code:

$ ("P" ).css ("color ");
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
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.

--------------------------------------------------------------------------------

Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
Return Value
JQuery

Parameters
Properties (Map): name/value pair to be set as a style Property

Example
Set the font color of all paragraphs to red and the background to blue.

JQuery code:

$ ("P" ).css ({color: "# ff0011", background: "blue "});

--------------------------------------------------------------------------------

If the attribute name contains "-", quotation marks must be used:

JQuery code:

$ ("P" ).css ({"margin-left": "10px", "background-color": "blue "});
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Css (name, value)
Set the value of a style attribute among all matching elements.
The number is automatically converted to the pixel value.

--------------------------------------------------------------------------------

Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
Return Value
JQuery

Parameters
Name (value): attribute name

Value (String, Number): Attribute value

Example
Set all paragraph fonts to red

JQuery code:

$ ("P" ).css ("color", "red ");
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Offset ()
Obtains the relative offset of the matching element in the current view.
The returned object contains two integer attributes: top and left. This method is only valid for visible elements.

--------------------------------------------------------------------------------

Get the current offset of the first matched element relative to the viewport.
The returned object contains two Integer properties, top and left. The method works only with visible elements.
Return Value
Object {top, left}

Example
Obtains the offset of the second segment.

HTML code:

<P> Hello </p> <p> 2nd Paragraph </p>
JQuery code:

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

<P> Hello </p> <p> left: 0, top: 35 </p>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
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.

--------------------------------------------------------------------------------

Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.
Return Value
Integer

Example
Obtain the height of the first segment.

JQuery code:

$ ("P"). height ();

--------------------------------------------------------------------------------

Retrieve document height

JQuery code:

$ (Document). height ();
Set the height of all paragraphs to 20:

JQuery code:

$ ("P"). height (20 );
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
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.

--------------------------------------------------------------------------------

Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.
Return Value
Integer

Example
Obtain the width of the first segment.

JQuery code:

$ ("P"). width ();

--------------------------------------------------------------------------------

Obtains the width of the current window.

JQuery code:

$ (Window). width ();
Set the width of all paragraphs to 20:

JQuery code:

$ ("P"). width (20 );