Using JavaScript to access an HTML element with multiple class names

Occasionally I discover a nifty solution to a coding obstacle. Although seemingly small, these can be major productivity barriers, especially if you are only a recreational coder. The following is in response to an HTML element that has multiple class names declared.

Our HTML looks something like this:

XHTML:

<div id="myElement" class="first second third">
   My Element
</div>

The element has three class names declared: first, second, and third. Depending on the scenario, you may need to find out if this element has the second class. Typically, you would use the following JavaScript:

JavaScript:

<script language="JavaScript">
window.onload = function()
{
   if (document.getElementById("myElement").className == "second")
   {
      alert("Congratulations, this element has the 'second' class name!");
   }
}
</script>

However, you will discover that even though our element has the second class associated with it, the alert does not fire. That is because the actual class name is not second, but is in fact first second third.

In order to detect whether or not this element has a specific class associated with it, it is better to use the following JavaScript:

JavaScript:

<script language="JavaScript">
window.onload = function()
{
   if (document.getElementById("myElement").className.indexOf("second") != -1)
   {
      alert("Congratulations, this element has the 'second' class name!");
   }
}
</script>

The alert will now fire properly.

The only caveat is to pay special attention to your class names. In the above example, if your element had the class names first_second, third, and fourth, then your alert would still fire. This is because your class name does contain an index of the word “second”, even though it does not contain the second class. Depending on the complexity of your Web site or Web application, an alternative would be to use a regular expression in order to guarantee an accurate match.

In reality, this is most helpful when you need to find out whether or not several different elements have a specific class associated with them. For this robust functionality, I would suggest using a library, such as jQuery.

• Posted by Brian
• January 10th, 2007