Search within TutorialsPark

Jquery Working with CSS


Learn to use jQuery to apply CSS property.


jQuery Manipulation: The css() Method

The jQuery provides a set of methods that that make working with CSS much easier, the most often used method is css()


Table : The css Method

Method Description
css(name) To get the value of the specified property from the first element in the jQuery object.
css(name, value) To set the value of the specified property for all elements in the jQuery object.
css(map) To set multiple properties for all of the elements in a jQuery object using a map object.
css(name, function) To set values for the specified property for all of the elements in a jQuery object using a function.

Get and Set CSS property using jQuery method css()

The jQuery Method of css(property) can be used to recieve the value only from the first element in the jQuery Object.

But the method css(property, value) is used to set a property, the change is applied to all the elements.

Example: Get and Set CSS property using jQuery Method css()

Give it a TRY! » Note: The css method is used to get and set CSS properties of the p Element.


Setting Multiple CSS properties using css(property, value) method

The jQuery method of css(property, value) can be used to set multiple properties in two different ways, the first way is to simply chain css() method.

Example: Setting Multiple CSS properties using css(property, value) Method

Give it a TRY! » Note:Here, multiple properties are added by chaining one method to another.


Setting Multiple CSS properties using css(map) method

The jQuery method of css(map) can be used to set multiple css properties using the Map Object.

Example: Setting Multiple CSS properties using css(map) method

Give it a TRY! » Note:If no class names are specified in the parameter, all classes will be removed.


Setting Relative Values using css() method

The jQuery method of css(property, change) can be used to accept relative CSS values.

The numeric values that are preceded by += or -= to add or subtract from the current value of the property.But this techinque is to be used only with numeric units

Example: Setting Relative Values using css() method

Give it a TRY! » Note:The new values are relative to the current values.


Setting properties using a function with css(property, function) Method

The jQuery method of css(property, function) is used to set property values dynamically using a function as a parameter to CSS method.

Example: Setting properties using a function with css(property, function) method

Give it a TRY! » Note: The font size is increased using the function,when the button is clicked.