Wenn Div mit einer bestimmten Klasse existiert, tun Sie etwas mit Javascript

Ich habe eine Klasse und wenn sie existiert, möchte ich die Variable als True/False-if-Anweisung verwenden.

HTML

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

JS

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

Es funktioniert jedoch nicht. Irgendwelche Ideen? Bitte keine jQuery-Antworten.

getElementsByClassName gibt a zurück NodeList das ist ein Array-ähnliches Objekt. Sie können es überprüfen length um festzustellen, ob Elemente mit definierter Klasse vorhanden sind:

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

Hier ist eine Musterlösung für die Prüfklasse (hasClass) in Javascript:

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

getElementsByClassName gibt eine NodeList zurück. Das wird es nie sein null. Es könnte eine haben .length von 0.

Ich habe es getestet. es funktioniert voll und ganz. Sie könnten jeden anderen Fehler gemacht haben. getElementsByClassName zurückkehren leer wenn kein Element mit gegebenem Klassennamen gefunden wird oder Liste von Elementen mit gegebener Klasse zurückgibt. Sie können also mit index darauf zugreifen.

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>

querySelector() Die Methode aus dem Dokument gibt das erste Element zurück, das mit dem angegebenen Selektor übereinstimmt, ansonsten wird es zurückgegeben Null wenn es keine Übereinstimmung gibt Abfrageselektor-Referenz.

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

Eine explizite Nullprüfung mit if-Anweisung ist nicht erforderlich, da null ein falscher Wert ist, wenn er in einem booleschen Kontext angetroffen wird, funktioniert die Verwendung der Ausgabe von querySelector falsche Referenz

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