Javascript：检查类名是不是存在

Posted 2023-03-16

【中文标题】Javascript：检查类名是不是存在

【英文标题】：Javascript: Check if classname existsJavascript：检查类名是否存在

【发布时间】：2013-05-04 18:01:38

【问题描述】：

<div class="Trade">
    <div id="Offer">
        <div class="NoResults">No Result!</div>
        <div class="FooterPager"> <span id="Offer"><a disabled="disabled">First</a>&nbsp;<a disabled="disabled">Previous</a>&nbsp;<a disabled="disabled">Next</a>&nbsp;<a disabled="disabled">Last</a>&nbsp;</span>
        </div>
    </div>
</div>

这是我的 javascript：

function Check()
return !(iframe.contentDocument.getElementById("Offer").firstElementChild.tagName.toLowerCase() == "table");

是否可以返回真值或假值来检查“NoResult”类是否存在？如果是这样，我该怎么做？你们摇滚。我无法更改 html 编码，只能更改 javascript。

【参考方案1】：

使用classList。

var hasClass = element.classList.contains('some-class');

Further Reading（免责声明：链接到我自己的帖子）。

如果您的目标平台不支持，请尝试...

var hasClass = (" " + element.className + " ").indexOf(" some-class ") > -1;

【讨论】：

@Turnerj - 不幸的是，即使 IE9 也不支持 :(

啊，你是对的它不支持它。对于其他想了解支持的人，check it here

什么是元素？可以吗div.classList？

如果div 是对HTMLElement 的引用，那么是的。

【参考方案2】：

if ( ~(' ' + element.className + ' ').indexOf(' NoResult ') ) 
    // here you go. You've got that class...

【参考方案3】：

在 Javascript 中不使用像 jQuery 这样的库，你可以这样做：

(' ' + MyElement.className + ' ').indexOf(' MyClassName ') != -1

当“MyClassName”单独出现在className 属性上定义的字符串内的任何位置时，这将评估为真。

在您的具体情况下，类似于：

function Check()

    //Returns true when it exists
    return (' ' + iframe.contentDocument.getElementById('Offer').firstElementChild.className + ' ').indexOf(' NoResults ') != -1;

之前我的回答中有一个错误，它会错误地识别出部分匹配，如 cmets 中所指出的那样。基本上，您需要在检查中考虑类名是否完整。一种巧妙的方法（如其他答案所示）是，如果您在整个 className 属性和您正在搜索的类之前和之后都留有空格，它将始终找到整个类。

虽然这可行，但我推荐 Alex's answer 和 classList isn't available in every browser（

【参考方案4】：

如何检查一个元素是否具有适用于所有浏览器的类： jQuery 1.6 或更低版本

    if($("#ElementId").attr('class').indexOf('ClassName') > -1)

JQuery 1.6 或更高版本

    if($("#ElementId").prop('class').indexOf('ClassName') > -1)

或者，如果你根本不打算使用 IE

    if($("#ElementId").prop('class').includes('ClassName'))