Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



Getting and setting CSS classes

Just like it is very easy to manipulate the content and the attributes of elements, as we saw in previous chapters, it is equally easy to manipulate the CSS of elements. The jQuery gives you easy access to changing both the style attribute, which you manipulate using the css() function, as well as the class(es) of an element, where several different function lets you modify it.

Let us start by looking into changing the class attribute. Class attribute takes one or several class names, which may or may not refer to the CSS class defined in our stylesheet. Usually it does, but we may from time to time add class names to our elements simply to be able to reach them easily from the jQuery, since jQuery has excellent support for selecting elements based on their class name(s).

I have defined a couple of very simple CSS selectors in my stylesheet, mostly for the testing purposes:

.boldd {
font-weight: bold;
}
.bluee {
color: blue;
}

In the example we will use 3 of the most interesting class related functions: hasClass(), which checks if one or several elements already has a specific class defined, addClass() function, which simply adds a class name to one or several elements and the removeClass() function, which will.... well, you have probably already guessed it.


<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>

<script type="text/javascript">
function ToggleClass(sender)
{

if($(sender).hasClass("boldd"))
$(sender).removeClass("boldd");
else
$(sender).addClass("boldd");
}
</script>

Example is actually very simple. When link is clicked, we send the link itself (this) as a parameter to the ToggleClass() function that we have defined. In it, we check if sender already has the "bold" class - if it has, we will remove it, otherwise we will add it. This is a pretty common thing to do, so obviously the jQuery people did not want us to write an entire three lines of code to it. That is why they implemented the toggleClass() function, with which we can turn our entire example given above into a single line of code:


<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Of course, we can select multiple elements, where as well we can add or remove multiple classes. Here is an example of just that:


<div id="divTestArea1">
<span>Test 1</span><br />
<div>Test 2</div>
<b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
$("#divTestArea1 span, #divTestArea1 b").addClass("blue");
$("#divTestArea1 div").addClass("bold blue");
});
</script>

First we select the span and b tag, which we add a single class to: the bold class. Then we select div tag, which we add two classes to, separated by space: The bold and the blue class. The removeClass() functions works just same way, allowing you to specify several classes to be removed, separated with space.



Related Videos