API/1.1.2/CSS
From jQuery JavaScript Library
Contents |
css( name )
Access a style property on the first matched element. This method makes it easy to retrieve a style property value from the first matched element.
Return value: String
Parameters:
-
name (String): The name of the property to access.
Example:
Retrieves the color style of the first paragraph
$("p").css("color");
<p style="color:red;">Test Paragraph.</p>
"red"
Example:
Retrieves the font-weight style of the first paragraph.
$("p").css("font-weight");
<p style="font-weight: bold;">Test Paragraph.</p>
"bold"
css( properties )
Set a key/value object as style properties to all matched elements.
This serves as the best way to set a large number of style properties on all matched elements.
Return value: jQuery
Parameters:
-
properties (Map): Key/value pairs to set as style properties.
Example:
Sets color and background styles to all p elements.
$("p").css({ color: "red", background: "blue" });
<p>Test Paragraph.</p>
<p style="color:red; background:blue;">Test Paragraph.</p>
css( key, 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:
-
key (String): The name of the property to set. -
value (String|Number): The value to set the property to.
Example:
Changes the color of all paragraphs to red
$("p").css("color","red");
<p>Test Paragraph.</p>
<p style="color:red;">Test Paragraph.</p>
Example:
Changes the left of all paragraphs to "30px"
$("p").css("left",30);
<p>Test Paragraph.</p>
<p style="left:30px;">Test Paragraph.</p>
height()
Get the current computed, pixel, height of the first matched element.
Return value: String
Example:
$("p").height();
<p>This is just a test.</p>
300
height( val )
Set the CSS height of every matched element. If no explicit unit was specified (like 'em' or '%') then "px" is added to the width.
Return value: jQuery
Parameters:
-
val (String|Number): Set the CSS property to the specified value.
Example:
$("p").height(20);
<p>This is just a test.</p>
<p style="height:20px;">This is just a test.</p>
Example:
$("p").height("20em");
<p>This is just a test.</p>
<p style="height:20em;">This is just a test.</p>
width()
Get the current computed, pixel, width of the first matched element.
Return value: String
Example:
$("p").width();
<p>This is just a test.</p>
300
width( val )
Set the CSS width of every matched element. If no explicit unit was specified (like 'em' or '%') then "px" is added to the width.
Return value: jQuery
Parameters:
-
val (String|Number): Set the CSS property to the specified value.
Example:
$("p").width(20);
<p>This is just a test.</p>
<p style="width:20px;">This is just a test.</p>
Example:
$("p").width("20em");
<p>This is just a test.</p>
<p style="width:20em;">This is just a test.</p>