Rimuovi JavaScript classe CSS
-
Usa
classList.remove()per rimuovere la classe CSS dall’elemento con JavaScript -
Usa jQuery
removeClass()per rimuovere la classe CSS dall’elemento con jQuery
Questo tutorial insegna come rimuovere una classe CSS da un elemento con JavaScript.
Usa classList.remove() per rimuovere la classe CSS dall’elemento con JavaScript
La proprietà classList restituisce la lista delle classi applicate a un elemento. Aiuta ad aggiungere, rimuovere e attivare le classi CSS allegate a un elemento. Ci fornisce i metodi add() e remove() per aggiungere/rimuovere classi da classList. Usando remove(), possiamo rimuovere facilmente la classe CSS da qualsiasi elemento.
<!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');
Nel codice sopra, abbiamo usato il selettore per ottenere l’elemento desiderato dal DOM, quindi lo memorizziamo in una variabile in modo da poter accedere alle sue proprietà e modificarle. Poiché volevamo rimuovere la classe dall’elemento, usiamo classList.remove() per rimuovere la classe desiderata. Possiamo anche rimuovere più nomi di classi contemporaneamente fornendo più argomenti.
Va notato che Internet Explorer non supporta la proprietà classList.
Usa jQuery removeClass() per rimuovere la classe CSS dall’elemento con jQuery
La funzione removeClass() in jQuery ha il solo scopo di rimuovere una classe da un elemento. Può rimuovere un singolo, multiplo o anche tutte le classi che da un elemento. Possiamo rimuovere la classe chiamando la funzione su qualsiasi elemento referenziato. Per rimuovere tutte le classi contemporaneamente, chiama la funzione removeClass() senza fornire alcun argomento.
<!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');
Un’altra funzione denominata toggleClass() aggiunge/rimuove classi da un elemento in modo tale che le classi già presenti vengano rimosse, ma vengano aggiunte le classi assenti. Aiuta a ottenere gli stessi risultati, ma dovrebbe essere usato con cautela perché se viene specificato un nome di classe errato, potremmo aggiungere una nuova 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