Juqery Learning 6 CSS--css, position, width and height_jquery

css(name)
Accesses the style properties of the first matching element.

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

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

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

Example
Get the color style attribute of the first paragraph value.

jQuery code:

$("p").css("color");
------------------ -------------------------------------------------- -------------------------------------------------- -----------------------------
css(properties)
Set a "name/value pair" object to all matches The style attribute of the element.
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): To set Name/value pairs for style attributes

example
sets 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" });
----- -------------------------------------------------- -------------------------------------------------- ----------------------------------------
css(name,value)
Set the value of a style attribute on all matching elements.
Numbers will be automatically converted to pixel values

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

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");
----------------------- -------------------------------------------------- -------------------------------------------------- ---------------------
offset()
Get the relative offset of the matching element in the current viewport.
The returned object contains two integer properties: top and left. This method only works on 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
Get the offset of the second paragraph

HTML code:

Hello

2nd Paragraph

jQuery code:

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

Hello

left: 0, top: 35

-------------------------------------------------- -------------------------------------------------- ---------------------------------------------
height()
Get the currently calculated height value (px) of the first matching element.
After jQuery 1.2, it can be used to get the height of 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
Get the height of the first paragraph

jQuery code:

$("p").height();

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

Get the document's height

jQuery code:

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

jQuery code:

$("p").height( 20);
-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -
width()
Get the currently calculated width value (px) of the first matching element.
After jQuery 1.2, it can be used to get the width of 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
Get the width of the first paragraph

jQuery code:

$("p").width();

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

Get the width of the current window

jQuery code:

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

jQuery code:

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