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.
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.
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.
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.
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>
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!
So verwenden Sie die Längenfunktion in Matlab
Java-Tutorial
Welche Auswirkungen hat die Schließung von Port 445?
Welche Datei ist mydrivers
So öffnen Sie eine PHP-Datei
So kaufen und verkaufen Sie Bitcoin auf der Ouyi-Plattform
So lösen Sie das Problem, dass die DLL nicht geladen werden kann
location.search
