Last Updated on February 14, 2021 by Roshan Parihar
In this tutorial, learn how to apply multiple CSS style to HTML elements using jQuery. The short answer is: use the jQuery css() method to add single or multiple CSS styles to the HTML element.
You can use jQuery attr() and addClass() methods to add multiple CSS properties to the specified elements. Let’s find out with the examples given below.
How to Apply Multiple CSS Using jQuery css()
The jQuery css() method add CSS properties to the selected elements. You can enter more than one comma-separated CSS properties with "property":"value" format as given below:
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $(".btncss").click(function(){ $(".paracss").css({"color":"#000","padding":"10px","background":"yellow","border":"3px solid #ccc"}); }); }); </script> <button class="btncss">Click to Apply Multiple Style</button> <p class="paracss">This is a paragraph.</p> |
Output
This is a paragraph to style using jQuery css().
When you click the button given button, it applies multiple CSS to the specified paragraph element. You can specify as many CSS properties as you want.
jQuery Add Multiple CSS With Style Attribute Using jQuery attr()
It applies the multiple CSS by adding the style attribute to the element. This method can also be used to add an attribute in jQuery. You have to write the CSS properties in bulk for the style attribute to add and apply to the element on button click as given below:
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $(".btnatt").click(function(){ $(".paraatt").attr("style","color:#ccc;padding:5px;background:orange;border:3px solid #ccc;"); }); }); </script> <button class="btnatt">Click to Add Multiple Style</button> <p class="paraatt">A paragraph to style CSS by jQuery attr().</p> |
Output
A paragraph to style CSS by jQuery attr().
The above example adds the CSS style attribute to the HTML element using jQuery. You have the click the button above to add the style attribute.
Add Class That Apply Multiple CSS Using jQuery addClass()
In addition to the above all methods, you can also use the jQuery addClass() method to add a class that contains multiple CSS styles. You have to first create a class and add as much CSS as you want to apply to the selected element in bulk. After that, use the method as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $(".btnaddclass").click(function(){ $(".paraaddclass").addClass("myclass"); }); }); </script> <style> .myclass{ color:#fff; background:green; padding:10px; border:3px solid #ccc; } </style> <button class="btnaddclass">Click to Add Class</button> <p class="paraaddclass">This para contains CSS to add when a class is added to it.</p> |
Output
This para contains CSS to add when a class is added to it.
When you click the button given above, it adds the class to the paragraph element that also applies the CSS.
The most used method to add a class in jQuery css() method. However, the other two methods addClass and attr() to add class and style attributes that contain multiple specified CSS to add to the selected elements.
You May Also Like to Read