hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Ajout et suppression de classes HTML sur demande avec jQuery

L'ajout d'une nouvelle classe HTML est une évidence. Ouvrez simplement le document HTML, localisez ce que vous voulez ajouter, insérez et nommez la classe. Mais quand il s'agit de construire un site web interactif qui permet à vos visiteurs de s'engager avec, vous devrez peut-être modifier, insérer et supprimer les classes HTML sur demande.

Vous pouvez le faire avec jQuery. Cet exemple de fonction ci-dessous va ajouter et supprimer my-new-class au

.

 // ## 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

Qu'est-ce que le Dropbox Hack peut vous apprendre sur l'état de la sécurité Web

Qu'est-ce que le Dropbox Hack peut vous apprendre sur l'état de la sécurité Web

La semaine dernière, Dropbox avait fait les manchettes sur un hack qui a vu les adresses e - mail et les mots de passe de 68 millions de comptes Dropbox compromis . Pour tout utilisateur de Dropbox, c'est bien sûr un sujet de préoccupation, en particulier si vous stockez quelque chose dans Dropbox, que ce soit personnel ou professionnel.Vo

(Conseils techniques et de conception)

Howler.js est probablement la meilleure bibliothèque audio JavaScript autour

Howler.js est probablement la meilleure bibliothèque audio JavaScript autour

Les lecteurs audio obsolètes appartiennent au passé grâce à l'audio HTML5 moderne et à l' adoption rapide du support par navigateur . Mais les concepteurs de sites Web peuvent aller plus loin avec une bibliothèque audio pure telle que Howler.js .Cette bibliothèque JS open source gratuite vous permet de lire des fichiers audio à partir de formats standard intégrés avec des lecteurs personnalisés. Howler es

(Conseils techniques et de conception)