CODEWITHSUNDEEP
javascript
Angel Politis
Angel Politis

Reputation: 11313

Custom JavaScript addClass method

Currently in JavaScript, in order to add a class to an element I use:

var element = document.getElementById("element");

var classes;
if (element.className.split(" ").indexOf("class") < 0) {
    classes = element.className.split(" ");
    classes.push("class");
    element.className = classes.join(" ");
}

If I wanted to make that code a method like jQuery's addClass() like below:

addClass: function(string) {
    var classes;
    if (element.className.split(" ").indexOf("class") < 0) {
        classes = element.className.split(" ");
        classes.push("class");
        element.className = classes.join(" ");
    }
}

In which object's prototype should I add this method to work like this:

document.getElementById("element").onclick = function() {
    this.addClass("class");
}

Upvotes: 4

Views: 15545

Answers (2)

zero298
zero298

Reputation: 26877

Use Element.classList.add().

Natively, it's available in all modern browsers including IE10 and up.

The link above also provides a polyfill for all non-supported browsers.

Upvotes: 2

pizzarob
pizzarob

Reputation: 12029

I believe you would add it to the Element object prototype

Element.prototype.addClass = function(className){
    // something
}

Upvotes: 4

Related Questions