How to add CSS properties to an element dynamically with jQuery
In this tutorial, we are going to see how to add CSS properties to an element dynamically with jQuery. You can use jQuery’s css() method to add new CSS properties to an item or change the values of existing properties dynamically using jQuery.
How to add CSS properties to an element dynamically with jQuery
<!DOCTYPE html> <html> <head> <title>Add CSS properties to an element dynamically</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("h2").css("background", "#1abc9c"); $("p").css({ "font-size": "20px", "text-align": "center", "padding": "40px" }); }); </script> </head> <body> <h2>This is a header</h2> <p>This is a paragraph.</p> </body> </html>
Result |
---|
This is a headerThis is a paragraph. |