classList-Attribut in HTML5

[Einführung] Ich habe einige neu hinzugefügte Selektoren in HTML5 eingeführt, nämlich querySelector(), querySelectorAll() und getElementsByClassName(). Diese drei verfügen über ihre eigenen einzigartigen Funktionen. Bei Bedarf können Sie den relevanten Inhalt in HTML5 lesen und analysieren. Heute

habe ich einige neu hinzugefügte Selektoren in HTML5 eingeführt, nämlich querySelector(), querySelectorAll() und getElementsByClassName(). Diese drei verfügen über ihre eigenen einzigartigen Funktionen. Bei Bedarf können Sie den relevanten Inhalt in HTML5 lesen und analysieren. Heute werde ich Ihnen das classList-Attribut vorstellen.

Was genau macht das classList-Attribut? Lassen wir classList vorerst in Ruhe. Wir beschäftigen uns mit der Frage, wie wir einen der Klassennamen unter Elementen mit mehreren Klassennamen löschen können. Menglong kämpfte mit seinem Gehirn und fand schließlich einen Weg, dies zu erreichen. Löschen Sie den Klassennamen meng unter den drei Klassennamen li, meng und long. Der Code lautet wie folgt:

HTML-Code

1. <p class="li meng long">梦龙小站</p>

JavaScript-Code

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
//获取类名字符串并拆分成数组  
var allClassName = p.className.split(" ");  
  
//找到要删除的类名  
var i, len,   
    pos = -1;  
  
for(i=0, len = allClassName.length; i < len; i++){  
    if(allClassName[i] == "meng"){  
        pos = i;  
        break;  
    }  
}  
  
//删除类名  
allClassName.splice(pos, 1);  
  
alert(allClassName) //li,long  
  
//将其余的类名拼成字符串并重新添加到元素的类名中  
p.className = allClassName.join(" ");

Vorschaueffekt

Um „meng“ zu entfernen Für den Elementklassennamen sind die oben genannten Codes erforderlich. Verwenden Sie einen ähnlichen Algorithmus, um den Klassennamen zu ersetzen und zu bestätigen, ob der Klassenname im Element enthalten ist. Wenn Sie einen Klassennamen hinzufügen, können Sie ihn durch Zusammenfügen von Zeichenfolgen vervollständigen. Sie müssen jedoch durch Erkennung sicherstellen, dass derselbe Klassenname nicht mehrmals hinzugefügt wird, um den Vorgang zu vereinfachen. Um einen Klassennamen zu löschen, müssen Sie zunächst den vorhandenen Klassennamen abrufen, den Speicherort finden, an dem der Klassenname gelöscht werden soll, und ihn dann löschen.

Aus der obigen Methode geht hervor, dass Sie zum Implementieren einer einfachen Löschfunktion mehrere Codezeilen schreiben müssen. Wenn Sie nicht mehrere Codezeilen schreiben möchten, müssen Sie eine Bibliothek einführen und verwenden Sie die Methode in der Bibliothek. Mit HTML5 ist dieser Aufwand nicht erforderlich. Wir können das classList-Attribut in HTML5 verwenden, um diese Schritte auszuführen. Dieses classList-Attribut ist eine Instanz des neuen Sammlungstyps DOMTokenList. Ähnlich wie bei anderen DOM-Sammlungen. DOMTokenList verfügt über ein Längenattribut, das angibt, wie viele Elemente es enthält. Um jedes Element zu erhalten, können Sie die Methode item() oder die Syntax in eckigen Klammern verwenden. Darüber hinaus sind unten die für diesen neuen Typ definierten Methoden aufgeführt.

1. Remove(value)

Die Methode „remove(value)“ bedeutet, die angegebene Zeichenfolge aus der Liste zu löschen. Ein kleines Beispiel lautet wie folgt:

HTML-Code

<p class="li meng long">梦龙小站</p>

JavaScript-Code

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList)  //li meng long  
  
p.classList.remove("meng")   
  
alert("p.className: " + p.className)  //p.className: li long

Vorschaueffekt

2. enthält(Wert)

Die Methode enthält(Wert). Gibt an, ob die Liste vorhanden ist. Wenn sie vorhanden ist, wird „true“ zurückgegeben, andernfalls wird „false“ zurückgegeben. Ein kleines Beispiel lautet wie folgt:

HTML-Code

1. <p class="li meng long">梦龙小站</p>

JavaScript-Code

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList.contains("meng")) //true  
  
alert(p.classList.contains("menglong")) //false

3. add(value)

Der Die Methode add(value) stellt die Zeichen in der Liste dar, die der Liste hinzugefügt werden. Wenn es bereits vorhanden ist, wird es nicht hinzugefügt. Ein kleines Beispiel lautet wie folgt:

HTML-Code

<p class="li meng long">梦龙小站</p>

JavaScript-Code

//添加类名 menglong  
  
//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
p.classList.add("menglong");  
  
alert("p.className: " + p.className)  //p.className: li meng long menglong

Vorschaueffekt

4. toggle(value)

toggle(value) method, Wenn der angegebene Wert bereits in der Liste vorhanden ist, löschen Sie ihn. Wenn der angegebene Wert nicht in der Liste enthalten ist, fügen Sie ihn hinzu. Ein kleines Beispiel ist wie folgt:

HTML-Code

<p class="li meng long">梦龙小站</p>  
梦龙小站

JavaScript-Code

//切换类名 meng  
  
//获取要删除类名li的p  
var p = document.getElementsByTagName("p");  
var i, len;  
  
for(i=0, len = p.length; i< len; i++){  
    p[i].classList.toggle("meng");  
}  
  
  
alert("p[0].className: " + p[0].className)  //p[0].className: li long  
alert("p[1].className: " + p[1].className)  //p[1].className: li meng long

Vorschaueffekt

Kleine Beispiele von classList wurden Ihnen vorgestellt. Diese kleinen Methoden können durch kleine implementiert werden Beispiele. Anschaulich dargestellt und erklärt. Mit classList wird das className-Attribut nicht mehr benötigt, es sei denn, Sie müssen alle Klassennamen löschen oder das Klassenattribut des Elements vollständig neu schreiben, und es sind viele praktische Methoden angehängt. Zu den Browsern, die das classList-Attribut unterstützen, gehören Firefox 3.6+ und Chrome.

Das ist es, was jeder tun muss, um das classList-Attribut des tatsächlichen HTML5-Kampfes und der Analyse einzuführen. Wenn Sie an einem Tag ein wenig HTML5 lernen, werden Sie es eines Tages auf jeden Fall erfolgreich lernen . Vielen Dank für die Unterstützung von Menglong Station. Weitere Updates zu HTML5 finden Sie in den Updates von Menglong Station zur HTML5-Praxis und -Analyse.

Das obige ist der detaillierte Inhalt vonclassList-Attribut in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!