Last Updated on June 3, 2021 by Roshan Parihar
There are methods jQuery css() and jQuery attr() by which jquery add style to HTML elements. There are many CSS properties you can set to the HTML element using these methods. You can add single as well as multiple CSS properties using jQuery methods here.
Let’s start learning these methods below here.
How jQuery Add Style to HTML Element Using css()
jQuery add style to the HTML element using css() method. There are two parameters you have to use with this method. The first parameter requires the jQuery selector to specify the id or class of the HTML element and access the element. The second parameter requires property name with its value.
See jQuery css() method to look for syntax.
Add Single Style
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-addcss").click(function(){ $("#para-addcss").css("color","red"); }); }); </script> <button id="btn-addcss" class="btn btn-primary">Add Single Style</button> <p id="para-addcss"><strong>Click the above button</strong> to add single style to HTML element using jQuery CSS method.</p> |
Output
Click the above button to add single style to HTML element using jQuery CSS method.
The above example adds the color property as red its value to the HTML paragraph element using its id. Click the “Add single Style” button to view the changes made by the CSS method.
Add Multiple Style
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-addmulticss").click(function(){ $("#para-addmulticss").css({"color":"#000","padding":"5px","background":"yellow","margin":"5px","border-radius":"10px"}); }); }); </script> <button id="btn-addmulticss" class="btn btn-primary">Add Multiple Style</button> <p id="para-addmulticss"><strong>Click the above button</strong> to add multiple style CSS to HTML element using jQuery CSS method.</p> |
Output
Click the above button to add multiple style CSS to HTML element using jQuery CSS method.
The above example add multiple CSS properties to the paragraph element by using the css() and element id. You have to specify the multiple CSS properties inside the curly bracket within the css().
Apply CSS to HTML Element Using jQuery attr()
jQuery attr() method is used to add attributes to HTML elements. However, you can use this method to apply CSS with added attributes and CSS properties to HTML elements.
See jQuery attr() method to learn the syntax and see below example for adding attribute using attr().
Add Single Style
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-addattr").click(function(){ $("#para-addattr").attr("style","color:red"); }); }); </script> <button id="btn-addattr" class="btn btn-primary">Add Single Style</button> <p id="para-addattr"><strong>Click the above button</strong> to add a style attribute to HTML element using jQuery attr() method.</p> |
Output
Click the above button to add a style attribute to HTML element using jQuery attr() method.
The above example adds a color property to HTML element with red as its value by accessing the element using its id. The method first adds the style attribute to the HTML element then after it adds the CSS property to its values.
Add Multiple Style
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-addmulticssatt").click(function(){ $("#para-addmulticssatt").attr("style","color:red;padding:5px;background:#ccc;margin:5px;"); }); }); </script> <button id="btn-addmulticssatt" class="btn btn-primary">Add Multiple Style</button> <p id="para-addmulticssatt"><strong>Click the above button</strong> to add multiple style CSS to HTML element using jQuery attr() method.</p> |
Output
Click the above button to add multiple style CSS to HTML element using jQuery attr() method.
The above example adds multiple CSS properties using the attr() method. You can specify the comma(,) separated CSS properties with its value inside the attr() method.
DOWNLOAD Free jQuery CHEAT SHEET
You May Also Like to Read