如果类存在，用 Javascript 做一些事情答案

【问题标题】：If class exists, do something with Javascript如果类存在，用 Javascript 做一些事情
【发布时间】：2014-12-02 23:58:09
【问题描述】：

我有一个类，如果它存在，我想将该变量用作真/假 if 语句。

HTML

<div id="snake" class="snake--mobile">

JS

var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion !== null)
  alert('xx');

但是，它不起作用。有任何想法吗？请不要 jQuery 答案。

【问题讨论】：

How to check if an element exist into another element?的可能重复
@dcc 我想要一个非 jQuery 解决方案
stackoverflow.com/questions/5783280/…

标签： javascript html

【解决方案1】：

这里是 Javascript 中检查类 (hasClass) 的示例解决方案：

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
   // do something if 'hasClass' is exist.
}

【讨论】：

是的，“包含”是去这里的方式......例如。 if( document.getElementById("MyElement").classList.contains('special-class') ) { console.log('Found!') }

【解决方案2】：

querySelector() 方法从文档返回第一个匹配指定选择器的元素，否则返回 null 如果没有匹配 query selector reference。

 Syntax
 element = document.querySelector(selectors);

console.log(`existing-class element ${document.querySelector('.existing-class')}`)

console.log(`non-existing-class element ${document.querySelector('.non-existing-class')}`)

if(document.querySelector('.existing-class')) {
  alert('inside if block')
}

&lt;div class="existing-class"&gt;

不需要使用 if 语句进行显式 null 检查，因为在布尔上下文中遇到 null 是一个错误值，因此使用 querySelector 的输出将起作用falsey reference

【讨论】：

【解决方案3】：

var id=$("#main .slides .gallery-cell.is-selected").attr('id');
var isselected = document.getElementById(id);
isselected.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});

【讨论】：

点评来源：您好，请不要只回答源代码。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢

【解决方案4】：

我已经测试过了。它完全正常工作。你可能会犯任何其他错误。 getElementsByClassName 如果没有找到具有给定类名的元素或返回具有给定类的元素列表，则返回 empty。所以你可以使用索引来访问它。

var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion.length > 0) {
  isMobileVersion[0].style.color="red";
  alert('class exist');
}

&lt;div id="snake" class="snake--mobile"&gt;Class Exist div &lt;/div&gt;

【讨论】：

你错了。 getElementsByClassName 永远不会返回 null。在您的示例中，您检查结果是否不是null，它始终是true，因为NodeList 对象不是假的。尝试检查“类不存在”，你会看到。
我已经检查了我的示例。如果找不到类，它将返回空对象。感谢@VisioN 纠正我的错误
不过，您的更新并没有解决问题，因为if (x) 仍会检查true 的值。评估元素是否存在的唯一方法是将length 属性与0 进行比较，如其他答案中所述。

【解决方案5】：

getElementsByClassName 返回一个节点列表。它永远不会是null。它可能有 .length 或 0。

【讨论】：

【解决方案6】：

getElementsByClassName 返回一个NodeList，它是一个类数组对象。您可以检查其length 以确定是否存在已定义类的元素：

var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion.length > 0) {
    // elements with class "snake--mobile" exist
}

【讨论】：