attribut classList en HTML5

[Introduction] J'ai introduit quelques sélecteurs nouvellement ajoutés en HTML5, à savoir querySelector(), querySelectorAll() et getElementsByClassName(). Ces trois éléments ont leurs propres fonctions uniques. Si nécessaire, vous pouvez lire le contenu pertinent dans le combat et l'analyse réels HTML5. Aujourd'hui

J'ai introduit quelques sélecteurs nouvellement ajoutés en HTML5, à savoir querySelector(), querySelectorAll() et getElementsByClassName(). Ces trois éléments ont leurs propres fonctions uniques. Si nécessaire, vous pouvez lire le contenu pertinent dans le combat et l'analyse réels HTML5. Aujourd'hui, je vais vous présenter l'attribut classList.

À quoi sert exactement l'attribut classList ? Laissons classList tranquille pour l'instant. Nous réfléchissons à la question suivante : comment supprimer l'un des noms de classe parmi les éléments portant plusieurs noms de classe ? Menglong a lutté avec son cerveau et a finalement trouvé un moyen d'y parvenir. Supprimez le nom de classe meng parmi les trois noms de classe li, meng et long. Le code est le suivant

Code HTML

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

Code JavaScript

//获取要删除类名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(" ");

Effet d'aperçu

Afin de supprimer "meng" de le nom de la classe d'élément, les codes ci-dessus sont requis. Utilisez un algorithme similaire pour remplacer le nom de classe et confirmer si le nom de classe est contenu dans l'élément. Si vous ajoutez un nom de classe, vous pouvez le compléter en épissant des chaînes, mais vous devez vous assurer grâce à la détection que le même nom de classe ne sera pas ajouté plusieurs fois. De nombreuses bibliothèques JavaScript ont implémenté cette méthode pour simplifier l'opération. Pour supprimer un nom de classe, vous devez d'abord obtenir le nom de classe existant, rechercher l'emplacement où le nom de classe doit être supprimé, puis le supprimer.

Il ressort de la méthode ci-dessus que pour implémenter une simple fonction de suppression, vous devez écrire plusieurs lignes de code. Si vous ne souhaitez pas écrire plusieurs lignes de code, vous devez introduire une bibliothèque. et utilisez la méthode dans la bibliothèque. Avec HTML5, vous n'avez pas à vous inquiéter autant. Nous pouvons utiliser l'attribut classList en HTML5 pour effectuer ces étapes. Cet attribut classList est une instance du nouveau type de collection DOMTokenList. Semblable aux autres collections DOM. DOMTokenList a un attribut length qui indique le nombre d'éléments qu'il contient. Pour obtenir chaque élément, vous pouvez utiliser la méthode item() ou la syntaxe des crochets. De plus, vous trouverez ci-dessous les méthodes définies pour ce nouveau type.

1. Remove(value)

La méthode Remove(value) signifie supprimer la chaîne donnée de la liste. Un petit exemple est le suivant :

Code HTML

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

Code JavaScript

//获取要删除类名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

Effet d'aperçu

2. contain(value)

La méthode contain(value) indique si la liste est La valeur donnée existe. Si elle existe, renvoyez "true", sinon renvoyez "false". Un petit exemple est le suivant :

Code HTML

<. 🎜>

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

Code JavaScript

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

3. ajouter(valeur)

Le La méthode add(value) représente les caractères de la chaîne de liste qui sont ajoutés à la liste. S'il existe déjà, il ne sera pas ajouté. Un petit exemple est le suivant :

Code HTML

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

Code JavaScript

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

Effet d'aperçu

4. toggle(value)

méthode toggle(value), si dans la liste Si la valeur donnée existe déjà, supprimez-la ; si la valeur donnée n'est pas dans la liste, ajoutez-la. Un petit exemple est le suivant :

Code HTML

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

Code JavaScript

//切换类名 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

Effet d'aperçu

De petits exemples de classList vous ont été présentés. Ces petites méthodes peuvent être implémentées via small. exemples montrés et expliqués clairement. Avec classList, à moins que vous n'ayez besoin de supprimer tous les noms de classe ou de réécrire complètement l'attribut de classe de l'élément, l'attribut className n'est plus nécessaire et de nombreuses méthodes pratiques sont attachées. Les navigateurs qui prennent en charge l'attribut classList incluent Firefox 3.6 et Chrome.

C'est tout pour tout le monde de présenter l'attribut classList du combat et de l'analyse réels HTML5. L'accumulation petit à petit est le succès de demain. Si vous apprenez un peu de HTML5 en une journée, vous l'apprendrez certainement avec succès un jour. . Merci à tous de soutenir Menglong Station. Pour plus de mises à jour sur HTML5, veuillez prêter attention aux mises à jour de Menglong Station sur la pratique et l'analyse HTML5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!