[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>

   Copier après la connexion

   Copier après la connexion

   Copier après la connexion

   Copier après la connexion

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>

   Copier après la connexion

   Copier après la connexion

   Copier après la connexion

   Copier après la connexion

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

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

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

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

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

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!