Ajout et suppression de classes HTML sur demande avec jQuery

 // ## ajoute la classe $ ('div'). addClass ('my-new-class'); // ## supprime la classe $ ('div'). removeClass ('my-new-class'); 

Nous pouvons également utiliser du code JavaScript standard pour ajouter / supprimer des classes HTML comme ceci:

 // ajoute la classe document.getElementById ('elem'). className = 'ma-nouvelle-classe'; // supprime la classe document.getElementById ('elem'). className = document.getElementByTag ('div'). className.replace (/ (?: ^ | \ s) mon-nouvelle-classe (?! \ S) / g, '') 

Le code que vous pouvez voir ci-dessus est moins simple que lorsque nous le faisons avec JavaScript jQuery Framework. Mais si vous ne voulez pas vous fier à un framework, vous pouvez toujours utiliser une nouvelle API JavaScript appelée classList .

Utilisation de l'API classList

Comme pour jQuery, classList fournit un ensemble de méthodes qui nous permettent de modifier les classes HTML.

Dans le cas où il y a un div avec plusieurs classes, nous pouvons récupérer les classes assignées dans la div utilisant classList .

 var classes = document.getElementByID ('elem'). classList; console.log (classes); 

Lorsque nous ouvrons la console du navigateur, nous pouvons voir la liste des classes.

Pour ajouter et supprimer des classes, nous pouvons utiliser .add() et .remove() .

 var elem = document.getElementByID ('elem'); // ajoute la classe elem.classList.add ('my-new-class'); // supprime la classe elem.classList.remove ('my-new-class'); 

L'ajout de plusieurs classes peut également être fait en séparant chaque classe avec une virgule :

 elem.classList.add ('my-new-class', 'mon-autre-classe'); 

Pour vérifier si certains éléments contiennent la classe spécifiée, nous pouvons utiliser .contains() . Il retournera vrai si la classe spécifiée est présente, et retournera faux si ce n'est pas le cas.

 elem.classList.contains ('nom-classe'); 

Nous pouvons également basculer la classe en utilisant .toggle() . L'extrait de code suivant montre comment lier la méthode .toggle() avec un événement de clic de souris.

 var button = document.getElementById ('bouton'); function toggle () {elem.classList.toggle ('bg'); } button.addEventListener ('clic', bascule, faux); 

Découvrez la démo en action à partir des liens suivants.

• Voir la démo
• Source de téléchargement

Pensée finale

classList est une nouvelle API JavaScript native qui est également introduite avec HTML5. Il est simple et fonctionne dans les navigateurs suivants: Firefox 3.6, Opera 11.5, Chrome 8 et Safari 5.1. Il est cependant absent dans Internet Explorer 9 et ci-dessous, vous devrez donc utiliser Polyfills lors de l'implémentation de l'API classList dans Internet Explorer.

Autre ressource

• L'API classList - Docteur HTML5
• Element classList - MDN
• Notes sur l'API classList

Reblog Content à partir d'autres sites en utilisant "Bookmark This" Bookmarklet

Parmi toutes les fonctionnalités de WordPress, Press This pourrait probablement être l'un des moins connus. Avez-vous entendu parler de ce? Même s'il a été inclus depuis les premières versions de WordPress avec le nom de Press It, peu de gens l'utilisent comme un outil de blog.Appuyez sur Ceci est un bookmarklet. En u

(Conseils techniques et de conception)

12 applications Android pour jouer à des jeux rétro classiques

Super Mario, Outrun, Duck Hunt, Donkey Kong, etc. étaient parmi les jeux vidéo les plus célèbres et les plus influents de tous les temps. Il y avait des moments où nous jouions à ces jeux à travers des consoles de jeux classiques, cependant, ces jeux rétro peuvent toujours être joués juste avec votre Android.Les émula

(Conseils techniques et de conception)