IE 9 和更早版本不支持 classList.contains('outputDiv')，答案

【问题标题】：classList.contains('outputDiv') not supported in IE 9 and older,IE 9 和更早版本不支持 classList.contains('outputDiv')，
【发布时间】：2013-09-06 04:54:22
【问题描述】：

classList.contains('outputDiv') 在 IE 9 及更早版本中不支持，有什么替代方案吗？

我的代码如下：

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

感谢您的帮助。

【问题讨论】：

MDN 上有一个适用于旧版浏览器（低至 IE8）的 shim - developer.mozilla.org/en-US/docs/Web/API/…

标签： javascript internet-explorer contains

【解决方案1】：

我刚刚写了这个，也许它会有所帮助？

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

它基本上解释了您可以使用的这个简单的替代方案：

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

然后你会像这样运行函数

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

编辑：我更新了函数来检查 yourObj 是否存在，并且 yourClass 是一个字符串。

【讨论】：

【解决方案2】：

如果您只需要.contains() 功能，请搜索className 内的子字符串，即elems[i].className.indexOf("outputDivsDesigned") > -1。

所以你的函数应该是这样的：

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

【讨论】：

【解决方案3】：

不确定它是否会起作用，因为尚未测试是否适用于跨浏览器，您可以尝试一下：-

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

【讨论】：

【解决方案4】：

你可以试试这个https://github.com/eligrey/classList.js

或者只使用className，然后搜索返回的字符串。

【讨论】：