Question

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

HTML

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

JS

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

然而，它不起作用。有任何想法吗？请不要jQuery回答。

Answer 1

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

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

Answer 2

getElementsByClassName返回NodeList。永远不会是null。它可能有.length 0。

Answer 3

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

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

<div id="snake" class="snake--mobile">Class Exist div </div>

Answer 4

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

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

Answer 5

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

Answer 6

文档中的

querySelector（）方法返回与指定选择器匹配的第一个元素，否则，如果没有匹配query selector reference，则返回 null 。

 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')
}

<div class="existing-class">

使用不需要if语句的显式null检查，因为在布尔上下文中遇到null时，它是false值，因此使用querySelector的输出将有效falsey reference

如果类存在，请使用Javascript执行某些操作

6 个答案: