In this tutorial you will learn how to get or set jQuery style properties to HTML elements.
jQuery css() Method:
The jQuery CSS() method allows us to compute the value of CSS style property or to set one or more CSS properties for the selected elements.
The CSS() method provides a quick way to apply the styles directly to the HTML elements i.e inline styles that can’t easily be defined in the stylesheet.
The CSS() method provides a quick way to apply the styles directly to the HTML elements i.e inline styles that can’t easily be defined in the stylesheet.
Get a CSS Property Value:
You can easily get the computed value of the CSS property of elements by simply passing the property as a parameter to the CSS() method.
Following is the basic syntax:
Syntax:
In the following example, the computed value of the CSS background-color property of an <div> element will be retrieved and displayed when you click on that color box.
Set a Single CSS Property and Value:
The CSS() method can take a property value and name as separate parameters for setting a single CSS property for the elements.
Following is the basic syntax:
Syntax:
In the following example, the CSS background-color property of the <div> element will be set to the orange, when it is clicked.
Set Multiple CSS Properties and Values:
It is possible yo set multiple CSS properties with the CSS() method.
Following is the syntax for setting more than one property for the elements:
Syntax:
In the following example, the background-color, padding, and margin properties will be added to the selected elements at the same time when you click on the button.