In this jQuery tutorial we will learn how to add css properties to any element (div / span / paragraph etc.) using jQuery.
Using jQuery css() method, we can add new CSS properties to any element.
Syntax
For adding just one css property, use below syntax.
1 | $('element').css('property', 'value'); |
For adding multiple css properties, use below syntax.
1 2 3 4 5 | $('element').css({ 'property-one': 'value', 'property-two': 'value' } ); |
Example
In below example, I am going to change the color of text under div of class newcolor to blue.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Add CSS Properties Using jQuery</title> <script src="//code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ $('.newcolor').css('color', 'blue'); }) </script> </head> <body> <div class="newcolor">This text is blue color</div> </body> </html> |