In this post, we will learn how to add CSS properties to an element using jQuery. So how we can do this, we will learn in this post.


How To Add CSS Properties To An Element Using jQuery ?


Add CSS Properties To An Element

To add CSS properties to an element, we use jQuery  css()  method. This method helps us to add new CSS properties or modify the existing CSS properties. 


Let's see in the given example how this method works.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Add CSS Properties To An Element Using jQuery ?</title>
</head>
<body>

<h1>CodexRadar</h1>
<p>This is an example text.This is an example text.This is an example text.This is an example text.This is an example text.</p>


<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<script>

$(document).ready(function(){
$("h1").css("color", "blue");

//when we add multiple property
$("p").css({
"color" : "white",
"background-color": "black",
"font-size": "16px",
"padding" : "10px"
});
});

</script>
</body>
</html> code-box



Summary

In this post we learned how to add CSS properties to an element using jQuery. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts. 

Post a Comment

Previous Post Next Post