Javascript-Klasse löschen

Javascript ist eine leistungsstarke Skriptsprache, die Webseiten lebendiger und reichhaltiger machen kann. Beim Webdesign müssen wir häufig einige Klassen hinzufügen oder löschen, um den Webseitenstil anzupassen. Wenn die Klasse jedoch nicht gelöscht wird, wird der Webseitenstil verwirrt und die Benutzererfahrung beeinträchtigt. In diesem Artikel wird vorgestellt, wie Javascript Klassen löscht, um Webseitenstile besser verwalten zu können.

Zunächst müssen wir das Klassenprinzip verstehen. In HTML können wir einen oder mehrere Klassennamen für Elemente angeben, indem wir das Klassenattribut hinzufügen, zum Beispiel:

<div class="box red"></div>

In CSS können wir den Klassenselektor verwenden, um Stile für Elemente mit angegebenen Klassennamen festzulegen, zum Beispiel:

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

Auf diese Weise können wir das Element mit dem angegebenen Klassennamen auf ein quadratisches Feld mit rotem Hintergrund setzen. Aber was ist, wenn wir diese Klasse entfernen möchten?

Eine Methode ist die Verwendung von jQuery, zum Beispiel:

$('.box').removeClass('red');

Dadurch kann die rote Klasse aller Elemente entfernt werden, deren Klasse den roten Namen enthält, aber jQuery selbst ist eine größere Bibliothek, und ihre Einführung erhöht die Ladezeit der Webseite . Daher verwenden wir lieber die nativen Methoden von Javascript, um die Funktion zum Löschen von Klassen zu implementieren.

1. Verwenden Sie die Methode element.classList.remove

Javascript stellt das classList-Attribut für Elemente bereit, das ein DOMTokenList-Objekt zurückgibt, das die Klassennamen aller Klassenattribute enthält.

Wir können die von diesem Objekt bereitgestellte Remove-Methode verwenden, um die angegebene Klasse zu löschen. Zum Beispiel:

var box = document.getElementsByClassName('box')[0];
box.classList.remove('red');

Dadurch wird die rote Klasse des Box-Elements entfernt. Es ist zu beachten, dass classList.remove nur eine Klasse löschen kann, nicht mehrere.

Wenn wir eine Schleife verwenden möchten, um bestimmte Klassen stapelweise zu löschen, können wir die Methode „split“ verwenden, um das classList-Objekt in ein Array zu konvertieren, und dann die Methode „forEach“ verwenden, um das Array zu durchlaufen und die angegebenen Klassen zu löschen. Zum Beispiel:

var boxes = document.querySelectorAll('.box');
boxes.forEach(function(box) {
  box.classList.remove('red');
});

Hier verwenden wir die Methode querySelectorAll, um alle Elemente mit der Klassenbox auszuwählen, dann das Array zu durchlaufen und alle roten Klassen zu löschen.

2. Verwenden Sie das Attribut „element.className“

Zusätzlich zur Verwendung der Methode „classList.remove“ können wir auch das Attribut „className“ des Elements direkt ändern, um den zu löschenden Klassennamen aus dem Attributwert zu entfernen.

Zum Beispiel:

var box = document.getElementsByClassName('box')[0];
box.className = box.className.replace('red', '');

In diesem Beispiel verwenden wir die Ersetzungsmethode, um die rote Klasse im Attributwert durch eine leere Zeichenfolge zu ersetzen und die Klasse zu löschen. Es ist zu beachten, dass diese Methode nur einen davon löschen kann, wenn der Attributwert mehrere identische Klassennamen enthält.

Wenn wir alle roten Klassennamen löschen möchten, können wir zum Abgleichen und Löschen reguläre Ausdrücke verwenden. Zum Beispiel:

var box = document.getElementsByClassName('box')[0];
box.className = box.className.replace(/red /g, '');

Hier verwenden wir das g-Flag, um eine globale Übereinstimmung anzuzeigen und Leerzeichen zum regulären Ausdruck hinzuzufügen, um zu vermeiden, dass andere Klassen gelöscht werden, die die rote Zeichenfolge enthalten.

3. Verwenden Sie die Methoden getAttribute und setAttribute

Zusätzlich zum direkten Ändern des className-Attributs können wir auch die Methoden getAttribute und setAttribute verwenden, um den Klassenattributwert des Elements abzurufen und festzulegen.

Zum Beispiel:

var box = document.getElementsByClassName('box')[0];
var classes = box.getAttribute('class').split(' ');
classes.splice(classes.indexOf('red'), 1);
box.setAttribute('class', classes.join(' '));

In diesem Beispiel verwenden wir die Methode getAttribute, um den Klassenattributwert des Elements abzurufen und ihn in ein Array umzuwandeln. Dann verwenden wir die Splice-Methode, um die angegebene rote Klasse zu löschen, und verwenden die Join-Methode, um das Array wieder in einen String umzuwandeln, und verwenden die setAttribute-Methode, um es als neuen Klassenattributwert festzulegen.

Es ist zu beachten, dass die Methoden getAttribute und setAttribute langsamer sind als das Attribut className. Daher müssen wir entsprechend der tatsächlichen Situation die am besten geeignete Methode auswählen.

Fazit

Das Löschen von Klassen ist ein wesentlicher Bestandteil der Verwaltung des Webseitenstils. Wir können die Attribute jQuery, classList, className sowie die Methoden getAttribute und setAttribute verwenden, um die Funktion des Löschens von Klassen zu erreichen. Durch Auswahl der für die tatsächliche Situation am besten geeigneten Methode können Webseitenstile effektiv verwaltet und die Benutzererfahrung verbessert werden.

Das obige ist der detaillierte Inhalt vonJavascript-Klasse löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!