jQuery CSS Manipulation

jQuery css() Method

jQuery has one important method for CSS manipulation: css()
The css() method has three different syntaxes, to perform different tasks.

• css(name) - Return CSS property value
• css(name,value) - Set CSS property and value
• css({properties}) - Set multiple CSS properties and values

---

Return CSS Property

Use css(name) to return the specified CSS property value of the FIRST matched element:

Example

$(this).css("background-color");

Set CSS Property and Value

Use css(name,value) to set the specified CSS property for ALL matched elements:

Example

$("p").css("background-color","yellow");

Set Multiple CSS Property/Value Pairs

Use css({properties}) to set one or more CSS property/value pairs for the selected elements:

Example

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery height() and width() Methods

jQuery has two important methods for size manipulation.

• height()
• width()

---

Size Manipulation Examples

The height() method sets the height of all matching elements:

Example

$("#div1").height("200px");


The width() method sets the width of all matching elements:

Example

$("#div2").width("300px");

jQuery CSS Methods From this Page:

CSS Properties	Description
$(selector).css(name)	Get the style property value of the first matched element
$(selector).css(name,value)	Set the value of one style property for matched elements
$(selector).css({properties})	Set multiple style properties for matched elements
$(selector).height(value)	Set the height of matched elements
$(selector).width(value)	Set the width of matched elements