CSS-Klasse JavaScript entfernen
-
Verwenden Sie
classList.remove(), um die CSS-Klasse mit JavaScript aus dem Element zu entfernen -
Verwenden Sie jQuery
removeClass(), um die CSS-Klasse mit jQuery aus dem Element zu entfernen
In diesem Tutorial erfahren Sie, wie Sie mit JavaScript eine CSS-Klasse aus einem Element entfernen.
Verwenden Sie classList.remove(), um die CSS-Klasse mit JavaScript aus dem Element zu entfernen
Die Eigenschaft classList gibt die Liste der auf ein Element angewendeten Klassen zurück. Es hilft, CSS-Klassen, die an ein Element angehängt sind, hinzuzufügen, zu entfernen und umzuschalten. Es stellt uns die Methoden add() und remove() zur Verfügung, um Klassen aus der classList hinzuzufügen/zu entfernen. Mit remove() können wir die CSS-Klasse ganz einfach aus jedem Element entfernen.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
var div = document.getElementById('delftstack');
div.classList.remove('delftclass');
Im obigen Code haben wir den Selektor verwendet, um das gewünschte Element aus DOM zu erhalten, und speichern es dann in einer Variablen, damit wir auf seine Eigenschaften zugreifen und sie ändern können. Da wir die Klasse aus dem Element entfernen wollten, verwenden wir classList.remove(), um die gewünschte Klasse zu entfernen. Wir können sogar mehrere Klassennamen gleichzeitig entfernen, indem wir mehrere Argumente bereitstellen.
Zu beachten ist, dass Internet Explorer die Eigenschaft classList nicht unterstützt.
Verwenden Sie jQuery removeClass(), um die CSS-Klasse mit jQuery aus dem Element zu entfernen
Die Funktion removeClass() in jQuery dient allein dem Zweck, eine Klasse aus einem Element zu entfernen. Es kann eine einzelne, mehrere oder sogar alle Klassen aus einem Element entfernen. Wir können die Klasse entfernen, indem wir die Funktion für ein beliebiges referenziertes Element aufrufen. Um alle Klassen auf einmal zu entfernen, rufen Sie die Funktion removeClass() auf, ohne irgendwelche Argumente anzugeben.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
$('#removeme').removeClass('admin');
Eine weitere Funktion namens toggleClass() fügt Klassen zu einem Element hinzu bzw. entfernt sie so, dass die bereits vorhandenen Klassen entfernt, aber fehlende Klassen hinzugefügt werden. Es hilft, die gleichen Ergebnisse zu erzielen, sollte jedoch mit Vorsicht verwendet werden, da wir bei Angabe eines falschen Klassennamens möglicherweise eine neue Klasse hinzufügen.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn