Heim > Artikel > Web-Frontend > Wie überprüfe ich, ob ein bestimmtes Element eine bestimmte Klasse in JavaScript hat?
Wie überprüfe ich, ob ein bestimmtes Element eine bestimmte Klasse in JavaScript hat?
- 王林nach vorne
- 2023-09-08 08:49:02674Durchsuche
Übersicht
Um eine bestimmte Aufgabe auszuführen, müssen wir zuerst über seine Klasse oder ID auf dieses bestimmte Element zugreifen. Bevor wir auf dieses Element zugreifen, prüfen wir, ob die Klasse in diesem bestimmten Element vorhanden ist. Das classList-Objekt enthält die integrierte Methode classList.contains() in JavaScript. Diese Methode bestimmt, ob das angegebene Element zur angegebenen Klasse gehört. Der gesamte Prozess wird stattfinden, weil wir zuerst über getElementById(), getElementsByClassName() oder eine andere Methode auf das Element zugreifen müssen. Nach dem Zugriff müssen wir die Klasse mit der Methode classList.contains() überprüfen.
Grammatik
Die in dieser Frage verwendete Syntax ist -
classList.contains(className);
classList – Dies ist ein Objekt in JavaScript, das ein Array von Klassen empfängt, die in einem bestimmten Element enthalten sind.
contains – Dies ist eine Methode des classList-Objekts, die prüft, ob die angegebene Klasse im angegebenen Element vorhanden ist.
className – Dies ist der angegebene Name, nach dem wir im angegebenen Element suchen müssen.
Algorithmus
Schritt 1 – Erstellen Sie einige HTML-Elemente innerhalb des Body-Tags. Weisen Sie jedem Element eine Klasse zu.
Schritt 2 – Geben Sie die Ereignismethode onclick() in der HTML-Schaltfläche an.
Schritt 3 – Erstellen Sie eine JavaScript-Pfeilfunktion. Greifen Sie auf beliebiges HTML zu und speichern Sie es in einer Variablen.
Schritt 4 – Verwenden Sie die Methode „contains()“ des Objekts „classList“. Übergeben Sie Variablen als Argumente an die Methode contains().
-
Schritt 5 – Wenn „true“ zurückgegeben wird, ist die spezifische Klasse im HTML-Element vorhanden. Andernfalls ist die spezifische Klasse im Element nicht vorhanden, wenn „false“ zurückgegeben wird.
Beispiel 1: Wenn das Element die angegebene Klasse enthält
Wir haben das „
“-Tag im Body-Tag verwendet, das den Klassennamen enthält: class = „my-para first lorems“, also sind dies die Klassennamen. Unsere Aufgabe besteht darin, ein Element daraufhin zu überprüfen, ob es das angegebene Element enthält. Dazu verwenden wir die Methode contains(), die eine Methode des classList-Objekts ist. Daher wird die Klasse, die wir überprüfen möchten, als Parameter an die Methode „contains()“ übergeben, die die Sicherheit der Klasse überprüft.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check for specified class in a given element</title>
<style>
body{
background-color: #0a0a0a;
color: white;
}
</style>
</head>
<body>
<p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
<button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
<div id="output" style="display: inline-block; padding: 0.3rem;"></div>
<script>
check = () => {
var ptag = document.getElementById("para");
var cl = ptag.classList;
var clContain = cl.contains("my-para");
if (clContain) {
document.getElementById("output").innerHTML += "Element contains specified class";
document.getElementById("output").style.background = "green";
document.getElementById("output").style.color = "white";
} else {
document.getElementById("output").innerHTML += "Element does not contains the specified class";
document.getElementById("output").style.background = "tomato";
document.getElementById("output").style.color = "white";
}
}
</script>
</body>
</html>
Die Ausgabe des obigen Beispiels, da die Ausgabe von „Elemente enthalten angegebene Klasse“ wahr ist.
Beispiel 2: Wenn das Element nicht die angegebene Klasse enthält
Das Bild unten zeigt „Element enthält nicht die angegebene Klasse“, was bedeutet, dass bei der Prüfung von classList.contains() „false“ zurückgegeben werden muss. Daher ist der Fehlerzustand beendet.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check for pecified class in a given element</title>
<style>
body{
background-color: #0a0a0a;
color: white;
}
</style>
</head>
<body>
<p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
<button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
<div id="output" style="display: inline-block; padding: 0.3rem;"></div>
<script>
check = () => {
var ptag = document.getElementById("para");
var cl = ptag.classList;
var clContain = cl.contains("mypara");
if (clContain) {
document.getElementById("output").innerHTML += "Element contains specified class";
document.getElementById("output").style.background = "green";
document.getElementById("output").style.color = "white";
} else {
document.getElementById("output").innerHTML += "Element does not contains the specified class";
document.getElementById("output").style.background = "tomato";
document.getElementById("output").style.color = "white";
}
}
</script>
</body>
</html>
Fazit
Der Rückgabetyp von classList ist DOMTokenList, ein Array-Typ. Es enthält die Liste der in diesem bestimmten Element vorhandenen Klassen. Die DOMTokenList kann durch Iterieren mit einer beliebigen for-Schleife oder Map angezeigt werden.
var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
console.log(element);
});
Die Methode „contains()“ gibt ein boolesches Ergebnis zurück, das wahr oder falsch ist. Das classList-Objekt enthält ein Array von Klassen. Wenn die Methode „contains()“ also die angegebene Klasse überprüft, überprüft sie die DOMTokenList, trifft in ihrem Namen eine Entscheidung und gibt „true“ oder „false“ zurück.
Das obige ist der detaillierte Inhalt vonWie überprüfe ich, ob ein bestimmtes Element eine bestimmte Klasse in JavaScript hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!