Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example

Wednesday, June 16th, 2010 | Tutorials | by Sean Walther

This tutorial will cover:

Modifying CSS attributes with jQuery
Setting a class for a page element
Removing a class from a page element
Testing if a class exists
A quick toggle click behavior example

The final example will use all of the other elements in a single exercise.

There are many more things you can do with CSS in jquery.

Modifying CSS attributes with jQuery

jQuery allows you to set individual CSS attributes with a simple one line command.

Using the selector, we grab a page element, and use the css method to alter a property name (or retrieve it).

This example will set the color of the div’s contents to red:

$("#pageElementID").css("color", "#ff0000");

This will take a div with the ID of “pageElementID” (<div id=”pageElementID”>Text to turn red</div>) and set the color attribute to red (#ff0000 in hex).

Setting a class for a page element

jQuery allows you to set assign classes to page elements.

Using the selector, we grab a page element, and use the toggleClass method to assign or remove a class from that object.

This example will add an “activated” class to a link:

$("#pageElementID a").toggleClass("activated", true);

This will take a div with the ID of “pageElementID” (<div id=”pageElementID”><a href=”#”>Link Text</div>) and add the class “activated” to the anchor link (A) . You should note that I said add, and not set. HTML elements can have multiple classes. This behavior is very important when building complex user interface controls.

You can also change an entire set of links, rather than just a single link:

$(".header a").toggleClass("activated", true);

This will take all anchor links (A’s) inside “header” class elements, and add the “activated” class.

Frequently this is paired with a CSS definition that alters the display of the CSS class. Infrequently, but importantly, it can be used as an indicator when trying to store a state in a page element (for example to do a toggle).

Removing a class from a page element

jQuery also allows you to remove classes to page elements.

This example will remove an “activated” class from a link:

$("#pageElementID a").toggleClass("activated", false);

This will take a div with the ID of “pageElementID” (<div id=”pageElementID”><a href=”#”>Link Text</div>) and remove the class “activated” from the anchor link (A).

Testing if a class exists

jQuery has a method called hasClass that enabled you to detect if a page element has a specific class.

This example will test if a link is activated:

if ($("#pageElementID a").hasClass("activated")) {

  alert("pageElementID's anchor tag is activated");

This will test if “activated” is a current class, and if so, alert a message to the user.

A quick toggle click behavior example

Putting everything together:

Testing if a class exists
Adding a class to a page element
Removing a class from a page element
Modifying CSS attributes of a page element

Here’s the HTML code:


<html>
<head>
     <style type="text/css">
          .activated {
               font-weight: bold;
          }
     </style>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
          $(document).ready(function() {
               $("#pageElementID").click(function() {
                    if ($(this).hasClass("activated")) {
                         $(this).toggleClass("activated", false);
                    } else {
                         $(this).toggleClass("activated", true);
                    }
                    return false;
               });
               $("#pageElementID").hover(function() {
                    $(this).css("color", "#ff0000");
               },function() {
                    $(this).css("color", "#0000ff");
               });
          });
     </script>
</head>
<body>
<div id="pageElementID">Test Link</div>
</body>
</html>

If you are seeing it operate correctly, there should be a plain black link “Test Link”. When you mouse over it, it will turn red. Mousing off of it will make it blue. When you click on it, the “activated” class is applied and the text is bold. Clicking the text again will remove the bold.

Be sure to click on it. It isn’t a link (and doesn’t have to be) — but still responds to the jQuery click method.

You can see the example – jQuery CSS Class and Attribute Toggle and Hover demo.

Tags: anchor link, attribute, basic, CSS, css attributes, div id, exercise, hover, HTML, Javascript, jQuery, page element, toggle, Tutorial

2 Comments to Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example

Pedro Cunha
November 14, 2011

Hi Sean,

This was a great post. Very useful, no doubt.
I saw that you wrote several jQuery posts and its amazing!
We, in our turn, recorded a lot of videos that everyone can see for free in our website.
If you think it’s a good idea to your readers, I post below the link of our free jQuery course called “Introduction to jQuery”

http://mrbool.com/course/Introduction-to-jQuery/261

Have a good day.

Jasleen
November 19, 2011

Its Amazing Keep it up!!!

Cheers,
Jas

Sean Walther's Blog

jQuery, HTML, Javascript, iPhone and other geeky topics