25
Jun
2012

How to add a CSS property using jQuery

Posted in: jQuery , No Comments

jquery_logo
This is a very basic jQuery tutorial. In this tutorial I will show you how to add a CSS property to a any element on a page. Let’s say you want to change color of text under a particular ID. You can do this with CSS also, but let’s do this with jQuery.

Step 1:
Write some text under a ID newcolor

<div id="newcolor">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>

At this stage our page looks like this:

Step 2:
Add jQuery library in head section.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Step 3:
Now we will add jQuery code in head section and tell it to find ID newcolor and change its color to blue.

<script type="text/javascript">
$(document).ready(function(){
$("#newcolor").css('color', 'blue');
});
</script>

Done!!!
So, our page now looks like this:

You can now see that the text color changed to blue. Similar you can add other CSS property (like font-size, font-family etc.) to any selected ID / class using jQuery.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply