Introduction détaillée à l'utilisation de classList en HTML5 pour faire fonctionner les classes CSS

Cet article présente principalement en détail la méthode d'utilisation de la classList en HTML5 pour faire fonctionner les classes CSS. Les amis intéressés peuvent s'y référer.

Ayant travaillé sur

JavaScript et des bibliothèques d'outils JavaScript depuis de nombreuses années, j'ai souvent ce fantasme : quand les navigateurs modernes fourniront-ils des méthodes auxiliaires et des bibliothèques de classes à la place de ces JavaScript ? bibliothèques, comme jQuery, remplaçons-les par des méthodes natives du navigateur. Je sais que les navigateurs vont certainement s'améliorer dans cette direction, mais ce processus d'évolution ne sera pas très rapide et divers navigateurs doivent réaliser de telles innovations ensemble. Firefox, Google Chrome et surtout IE ne peuvent être utilisés que lorsque ces navigateurs grand public ne le sont qu'avec de tels navigateurs. fonctions peuvent nos souhaits être vraiment réalisés. La bonne nouvelle est qu'une de ces fonctionnalités a été ajoutée à l'API HTML5 : classList.

Dans l'API HTML5, chaque nœud de la page DOM possède un objet classList. Les programmeurs peuvent utiliser les méthodes à l'intérieur pour ajouter, supprimer et modifier des classes CSS sur le nœud. En utilisant classList, les programmeurs peuvent également l'utiliser pour déterminer si un certain nœud se voit attribuer une certaine classe CSS.

Element.classList

Il existe de nombreuses méthodes utiles dans cet objet classList :

{   
 length: {number}, /* # of class on this element */   
 add: function() { [native code] },   
 contains: function() { [native code] },   
 item: function() { [native code] }, /* by index */   
 remove: function() { [native code] },   
 toggle: function() { [native code] }   
}

Comme vous pouvez le voir ci-dessus, Element.classList la classe est petite, mais chaque méthode qu’elle contient est utile.

Ajouter une classe CSS

En utilisant la méthode add, vous pouvez ajouter une ou plusieurs classes CSS aux éléments de la page :

myp.classList.add('myCssClass');

Supprimer une classe CSS

À l'aide de la méthode Remove, vous pouvez supprimer une seule classe CSS :

myp.classList.remove('myCssClass');

Vous pouvez en transmettre plusieurs à la fois dans cette méthode Classe noms, séparés par des espaces, mais le résultat de l'exécution peut ne pas être celui que vous attendez.

Inverser la présence ou l'absence de la classe CSS

myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除

La fonction de cette méthode est que lorsque l'élément myp n'a pas cette classe CSS , ce sera nouveau Ajoutez cette classe CSS ; si l'élément myp possède déjà cette classe CSS, il la supprime. C'est une opération d'inversion.

Vérifiez s'il contient une certaine classe CSS

myp.classList.contains('myCssClass'); //returns true or false

Tous les navigateurs modernes (Firefox, Google Chrome, etc.) prennent actuellement en charge cette classe classList. Par conséquent, je. croyez que les nouvelles bibliothèques de classes JavaScript utiliseront la classe classList pour faire fonctionner la classe CSS de la page, sans avoir à analyser l'attribut class

du nœud d'élément comme avant !

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!