Custom JavaScript addClass method

Question

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");
}

Extending builtins' prototypes with nonstandard functions can make for confusing code. I'd suggest you use a classList polyfill or make addClass its own function that takes the element as an argument instead. — Ry-
– Ry- ♦, Commented Jul 9, 2016 at 0:07
Why would adding a useful function as method make the code confusing @RyanO'Hara? — Angel Politis
– Angel Politis, Commented Jul 9, 2016 at 0:19
@AngelPolitis A future version of DOM could define a native addClass which behaves differently than yours. It could even have a setter, and when you attempt to define your method, something unexpected may happen. Never alter an object you don't own. — Oriol
– Oriol, Commented Jul 9, 2016 at 0:22

pizzarob · Accepted Answer · 2016-07-09 00:10:53Z

4

I believe you would add it to the Element object prototype

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

edited Jul 9, 2016 at 0:10

answered Jul 9, 2016 at 0:05

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Angel Politis Over a year ago

Absolutely correct @realseanp. I just tested and it works! Thanks a lot.

zero298 Over a year ago

Avoid adding to prototypes that you don't own.

pizzarob Over a year ago

OP's question was "which object's prototype should I add this method to". Element is the object in which the method would be added to to accomplish what the question is asking. Down voting based on opinion is unwarranted.

Seth Over a year ago

It's not an opinion @realseanp... it's a known thing programmers.stackexchange.com/questions/104320/…. Just cause you answer what the OP asked, doesn't mean it's not a bad practice.

nnnnnn Over a year ago

Most people consider this bad practice. I consider this bad practice. But I agree with realseanp that the down-votes are unwarranted because this does answer the question that was asked so the answer is both literally correct and helpful to the OP. Having said that, it would be a better answer if it included even a one-sentence explanation about why this is bad practice, and it could perhaps give an example of testing if the method already exists on the prototype rather than blindly overwriting it.

Seth · Accepted Answer · 2016-07-09 12:45:42Z

2

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.

edited Jul 9, 2016 at 12:45

Seth

10.5k10 gold badges50 silver badges69 bronze badges

answered Jul 9, 2016 at 0:26

zero298

27.1k10 gold badges80 silver badges109 bronze badges

4 Comments

Seth Over a year ago

This should be the accepted answer. Coupled with a polyfill this is the most past/future-friendly option.

nnnnnn Over a year ago

But is the question really about adding classes, or is it "How do I add methods to DOM elements?" with classes just being an example? (I know that extending native prototypes is widely considered to be a bad practice - and I agree that it is - but that doesn't mean there isn't a clear answer on how to do it.)

Angel Politis Over a year ago

@Seth no it shouldn't. My question was clear. I wasn't asking for another way to add a class, but in which object's prototype I should add a method that does that. This a useful suggestion that doesn't, however, answer the question.

Seth Over a year ago

Understood. If you're trying to learn how to work with prototypes by creating a library similar to jQuery through native objects, then I 100% agree with you. However, if you want to write future-proof JavaScript for a production application, document.getElementById("example").onclick = function() { this.classList.add("class"); } is a well tested alternative!

Collectives™ on Stack Overflow

Custom JavaScript addClass method

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related