CSS Class Functions

For years JavaScript developers have writen long, tedious functions to directly manipulate the "style" attibute of elements. That works fine when you just want to change one style here and there. But what if you have to change a whole list of styles at once?

A far simpler and cleaner way to change the visual state of elements on the page is to just add or remove CSS classes. The classes you add or remove can have any number of styles, and with one function call you can apply (or remove) them all at once. It also makes it easy to set the default state on page-load: just put the class there or leave it off.

These functions allow you to add, remove, replace, or toggle the classes on any element and determine what classes are applied to it already.

FM.checkForClass(element, nameOfClass): Checks an HTML element for the presence of a given class
FM.addClass(element, nameOfClass): Adds a class to an element's class attribute
FM.removeClass(element, nameOfClass): Removes a class from an element's class attribute
FM.replaceClass(element, class1, class2): Replaces a class with another, but only if the class is present
FM.toggleClass(element, nameOfClass): Toggles the specified class on and off

Example 1

This paragraph starts with no classes. Click the links below to add or remove the available classes.

Example 2

The following is an example of a navigation menu with sub sections that appear under each main section. To hide or show the sub-menus is a simple matter of adding or removing the "Hidden" class. And changing the direction of the arrow is simply adding or removing the "On" class.

Code

You can copy and paste any and all of these functions, or just download them all in one file.

// Make sure the "FM" namespace object exists
if (typeof FM != 'object') {
    FM = new Object();
}

/**
 * Checks a given class attribute for the presence of a given class
 *
 * @author  Dan Delaney     http://fluidmind.org/
 * @param   element         DOM Element object (or element ID) to remove the class from
 * @param   nameOfClass     The name of the CSS class to check for
 */
FM.checkForClass = function(element, nameOfClass) {
    if (typeof element == 'string') { element = document.getElementById(element); }

    if (element.className == '') {
        return false;
    } else {
        return new RegExp('\\b' + nameOfClass + '\\b').test(element.className);
    }
}


/**
 * Adds a class to an element's class attribute
 *
 * @author  Dan Delaney     http://fluidmind.org/
 * @param   element         DOM Element object (or element ID) to add the class to
 * @param   nameOfClass     Class name to add
 * @see     checkForClass
 */
FM.addClass = function(element, nameOfClass) {
    if (typeof element == 'string') { element = document.getElementById(element); }

    if (!FM.checkForClass(element, nameOfClass)) {
        element.className += (element.className ? ' ' : '') + nameOfClass;
        return true;
    } else {
        return false;
    }
}


/**
 * Removes a class from an element's class attribute
 *
 * @author  Dan Delaney     http://fluidmind.org/
 * @param   element         DOM Element object (or element ID) to remove the class from
 * @param   nameOfClass     Class name to remove
 * @see     checkForClass
 */
FM.removeClass = function(element, nameOfClass) {
    if (typeof element == 'string') { element = document.getElementById(element); }

    if (FM.checkForClass(element, nameOfClass)) {
        element.className = element.className.replace(
            (element.className.indexOf(' ' + nameOfClass) >= 0 ? ' ' + nameOfClass : nameOfClass),
            '');
        return true;
    } else {
        return false;
    }
}


/**
 * Replaces a class with another if the class is present
 *
 * @author  Dan Delaney     http://fluidmind.org/
 * @param   element         DOM Element object (or element ID) to remove the class from
 * @param   class1          Class name to replace
 * @param   class2          Class name to replace it with
 * @see     checkForClass
 * @see     addClass
 * @see     removeClass
 */
FM.replaceClass = function(element, class1, class2) {
    if (typeof element == 'string') { element = document.getElementById(element); }

    if (FM.checkForClass(element, class1)) {
        FM.removeClass(element, class1);
        FM.addClass(element, class2);
        return true;
    } else {
        return false;
    }
}


/**
 * Toggles the specified class on and off
 *
 * @author  Dan Delaney     http://fluidmind.org/
 * @param   element         DOM Element object (or element ID) to toggle the class of
 * @param   nameOfClass     Class name to toggle
 * @see     checkForclass
 * @see     addClass
 * @see     removeClass
 */
FM.toggleClass = function(element, nameOfClass) {
    if (typeof element == 'string') { element = document.getElementById(element); }

    if (FM.checkForClass(element, nameOfClass)) {
        FM.removeClass(element, nameOfClass);
    } else {
        FM.addClass(element, nameOfClass);
    }

    return true;
}