JS: How do we work with classes in CSS?

Question

How do we manipulate the class of DOM elements with javascript? Is there a getElementsByClassName function?

Answer 1

Standard way is

error_message.className = 'error-message';

But you'll find these functions can simplify things a lot:

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
//chekcs if selected element has class "cls", works for elements with multiple classes

function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
//adds new class to element

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
     var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
     ele.className=ele.className.replace(reg,' ');
    }
}
//removes class from element

Usage in a stackoverflow greasemonkey script to show all questions on page, regardless if they're ignored or not:

var childNodes=document.getElementById("questions").childNodes; //array of all questions

for (var i=1; i<childNodes.length; i+=2) //iterates through all questions on page. 
{
    removeClass(childNodes[i],"tagged-ignored-hidden");
    addClass(childNodes[i],"user_defined_class");   
}

(Don't worry if the for loop looks weird in that it skips every other element; the specifics of Stackoverflow's DOM layout with extra nodes between questions aren't important here.)

As to document.getElementsByClassName, it returns an array of DOM elements with the specific class (as you would suspect). BUT:

Safari 3.1 has native getElmentsByClassName support, and upcoming Firefox 3 and Opera 9.5 will have it too. It only leaves out, you’ve guessed it, Internet Explorer.

source

Answer 2

You can change a class in plain-old JavaScript using something like:

document.getElementById('myElement').className = 'myClass';

Or, if you're using JQuery, you can just use the "Class" functions.

Addressing the added details to the question about 'getElementsByClassName' and your comment:

It would probably be safest (and easiest) to use your favourite JavaScript library for this.

JQuery example:

$(".myClassName").each(function() {
    //do what you want with the current element $(this)
});

Hope that helps.

Answer 3

Many JavaScript implementations do have a getElementsByClassName method built in. But if they don’t, you can implement it for yourself:

if (typeof Element.prototype.getElementsByClassName == "undefined") {
    Element.prototype.getElementsByClassName = function(className) {
        var elems = document.getElementsByTagName("*"),
            matches = [];
        for (var i=0, n=elems.length; i<n; ++i) {
            if (elems[i].hasAttribute("class")) {
                var classNames = elems[i].getAttribute("class").split(/\s+/);
                for (var j=0,m=classNames.length; j<m; ++j) {
                    if (classNames[j] == className) {
                        matches.push(elems[i]);
                        break;
                    }
                }
            }
        }
        return new NodeList(matches);
    };
}