classList.contains('outputDiv') not supported in IE 9 and older, is there any alternative for that?

My code is as below:

function toggleclass() {

    var elems = document.getElementsByClassName("outputDivs");
    for (var i = 0; i < elems.length; ++i) {
        if (elems[i].classList.contains("outputDivsDesigned"))
            elems[i].className = "outputDivs";

        else
            elems[i].className += " outputDivsDesigned";
    }
}

Thanks for any help.

classList.contains('outputDiv') not supported in IE 9 and older, is there any alternative for that?

My code is as below:

function toggleclass() {

    var elems = document.getElementsByClassName("outputDivs");
    for (var i = 0; i < elems.length; ++i) {
        if (elems[i].classList.contains("outputDivsDesigned"))
            elems[i].className = "outputDivs";

        else
            elems[i].className += " outputDivsDesigned";
    }
}

Thanks for any help.

• javascript
• internet-explorer
• contains

• There's a shim for older browsers (down to IE8) on MDN - developer.mozilla/en-US/docs/Web/API/… – Phil Commented Sep 3, 2013 at 6:43

4 Answers 4

You can try this https://github./eligrey/classList.js

or just use className, and search the returned string.

I just wrote this, perhaps it might be helpful?

http://www.tjcafferkey.me/ie9-classname-containsclass-alternative/

It basically explains this simple alternative you could use:

function containsClass(yourObj, yourClass) {
    if(!yourObj || typeof yourClass !== 'string') {
        return false;
    } else if(yourObj.className && yourObj.className.trim().split(/\s+/gi).indexOf(yourClass) > -1) {
        return true;
    } else {
        return false;
    }
}

You would then run the function like this

var isFeaturedPost = containsClass(obj, 'featured-post-class');

Edit: I've updated the function to check yourObj exists, and that yourClass is a string.

Not sure if it will work as have not tested to be working for crossbrowser you can give a try to:-

  classList.indexOf("outputDivsDesigned") != -1

If all you need is .contains() functionality, search for the substring inside of the className, i.e. elems[i].className.indexOf("outputDivsDesigned") > -1.

So your function would look like this:

function toggleclass() {    
    var elems = document.getElementsByClassName("outputDivs");
    for (var i = 0; i < elems.length; ++i) {
        if (elems[i].className.indexOf("outputDivsDesigned") > -1)
            elems[i].className = "outputDivs";    
        else
            elems[i].className += " outputDivsDesigned";
    }
}