Last Updated on June 20, 2021 by Roshan Parihar
In this tutorial, learn how jQuery change the CSS property of the HTML element. The short answer is to use the css() method that requires two arguments to pass.
You can change single as well as multiple CSS properties of HTML element using the css(). Let’s find out with the examples given below here.
How to Change Single CSS Property in jQuery
Syntax: Change Single CSS Property
|
1 |
$("selector").css("PropertyName","value") |
The selector parameter requires ids or class names of the HTML element you want to change CSS. There are two arguments passed inside the css(). The first parameter requires the property name and the second parameter requires the value of the relevant property.
See the example below to learn the method.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("button").click(function(){ $("p").css("padding","30px"); }); }); </script> <button type="button">Click me to Change Single</button> <p style="color:red;background:yellow;padding:5px;">This is the paragraph to change CSS Property.</p> |
Output
This is the paragraph to change CSS Property.
You can click the above button to change the single CSS property of the paragraph element.
Change Multiple CSS Properties
To change multiple CSS properties, you have to use the syntax given below that uses the css().
Syntax: Change Multiple CSS Property
|
1 |
$("selector").css({"PropertyName1":"value1","PropertyName2":"value2","PropertyName3":"value3".........}) |
You can specify multiple CSS properties with their values inside the css() function within the curly bracket.
See the example below to change multiple CSS properties.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"color":"#fff","background":"#ccc","padding":"30px"}); }); }); </script> <button type="button">Click to Change Multiple</button> <p style="color:red;background:yellow;padding:5px;">This is the paragraph to change CSS Property.</p> |
Output
This is the paragraph to change CSS Property.
The above example contains the button that you have to click to change multiple CSS properties.
You May Also Like to Read
- jQuery CSS method
- How jQuery Apply Multiple CSS Style to HTML Element
- jQuery Add Style to HTML Element and Apply CSS
Resource
jQuery css() API