Feb
27

Basic jQuery Tutorial: Change CSS

By Mukesh Chapagain  //  CSS, jQuery  //  10 Comments

In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.

VIEW DEMO

Here is my html code:

<div> <span>Sample text!</span> <br /> Testing! </div> <br />   <div>Click me</div>

As you can see above, I have a div with id ‘content’. I have ‘Sample text!’ inside span. And I have a div with id ‘clickme’.

Here is CSS class to be used:

.hover { text-decoration: underline; cursor: pointer; color: #003399; font-weight: bold; }

Here is the magical jQuery function :)

$("#clickme").hover(function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); });

Here, ‘hover’ function is used. It means that, when we hover on ‘Click me’ div then the CSS class ‘hover’ is added to the ‘clickme’ div. The ‘hover’ class will change the color, font-weight, etc. of the div text ‘Click me’.

Now, when we click the ‘Click me’ text, then the CSS styling is added to the div ‘content’. The new styling will change the text of div ‘content’ to green in color and it also increases the font size. The following jQuery code is used:

$("#clickme").click(function(){ $("#content").css({"color":"green","font-size":"20px"}); });

VIEW DEMO

Cheers,

Share this:

• Share

• Share on Tumblr
• Pin It
• Email

Related posts:

Basic jQuery Tutorial: Animate div and image How to create pagination using CSS Best Beginner Tutorial For jQuery How to expand collapse (toggle) div layer using jQuery

Tags: class, CSS, jQuery

Author: Mukesh Chapagain

Passionate about Web Technology and Web development. Loves Blogging. Keenly interested in Open Source Technology/Software/Framework.

Mukesh Chapagain has written 20 articles for us.

Share this article:

10 Comments to “Basic jQuery Tutorial: Change CSS”

• Design Gala February 27, 2010 at 2:36 pm

  Basic jQuery Tutorial: Change CSS http://bit.ly/bxfE4M

  Reply
• JQuery Watcher February 27, 2010 at 3:09 pm

  RT @designgala Basic jQuery Tutorial: Change CSS http://bit.ly/bxfE4M

  Reply
• Basic jQuery Tutorial: Change CSS | Drakz Free Online Service February 28, 2010 at 6:59 am

  [...] the original: Basic jQuery Tutorial: Change CSS Share and [...]

  Reply
• WordPress Rocker March 3, 2010 at 11:44 am

  RT @designgala: Basic jQuery Tutorial: Change CSS http://is.gd/9kqiO

  Reply
• WordPress Rocker March 3, 2010 at 3:44 pm

  RT @designgala: Basic jQuery Tutorial: Change CSS http://is.gd/9kqiO

  Reply
• 7 Basic jQuery Goodness | jQuery4u January 13, 2011 at 11:44 am

  [...] [...]

  Reply
• 
  sam January 13, 2011 at 8:46 pm

  Hi,
  nice article i think changing css can be useful.

  Can i ask how did you get rid of the linkwithin text on the related topics section?

  Thanks
  Sam

  Reply
• 
  super February 14, 2011 at 1:33 pm

  thanks for the tutorial but i still could change the label text to bold using $(‘label’).css(“font-weight”:”bold”);

  Reply
• 
  super February 14, 2011 at 1:33 pm

  sorry i meant COULD NOT :

  Reply
• 
  Arran North April 19, 2011 at 3:05 pm

  Hi,

  Came across your site when looking for the above; I’m a bit of a jQuery noob, but noticed you made a mistake…

  In the post above it states…

  Sample text!

  Testing!

  Click me

  But you didn’t give the div an id of clickme

  i.e. it should have been:

  Sample text!

  Testing!

  Click me

  Thanks for this post nonetheless :)!!

  Reply