Supprimer la classe CSS JavaScript
-
Utilisez
classList.remove()pour supprimer la classe CSS de l’élément avec JavaScript -
Utilisez jQuery
removeClass()pour supprimer la classe CSS de l’élément avec jQuery
Ce tutoriel explique comment supprimer une classe CSS d’un élément avec JavaScript.
Utilisez classList.remove() pour supprimer la classe CSS de l’élément avec JavaScript
La propriété classList renvoie la liste des classes appliquées à un élément. Il permet d’ajouter, de supprimer et de basculer les classes CSS attachées à un élément. Il nous fournit les méthodes add() et remove() pour ajouter/supprimer des classes de la classList. En utilisant remove(), nous pouvons facilement supprimer la classe CSS de n’importe quel élément.
<!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');
Dans le code ci-dessus, nous avons utilisé le sélecteur pour obtenir l’élément souhaité à partir du DOM, puis nous le stockons dans une variable afin que nous puissions accéder à ses propriétés et les modifier. Puisque nous voulions supprimer la classe de l’élément, nous utilisons classList.remove() pour supprimer la classe souhaitée. Nous pouvons même supprimer plusieurs noms de classe en même temps en fournissant plusieurs arguments.
Il est à noter qu’Internet Explorer ne supporte pas la propriété classList.
Utilisez jQuery removeClass() pour supprimer la classe CSS de l’élément avec jQuery
La fonction removeClass() dans jQuery a pour seul but de supprimer une classe d’un élément. Il peut supprimer une seule, plusieurs ou même toutes les classes d’un élément. Nous pouvons supprimer la classe en appelant la fonction sur n’importe quel élément référencé. Pour supprimer toutes les classes à la fois, appelez la fonction removeClass() sans fournir d’arguments.
<!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');
Une autre fonction nommée toggleClass() ajoute/supprime des classes d’un élément de sorte que les classes déjà présentes soient supprimées, mais que les classes absentes soient ajoutées. Cela aide à obtenir les mêmes résultats mais doit être utilisé avec prudence car si un nom de classe incorrect est spécifié, nous pourrions ajouter une nouvelle classe.
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