Trucsweb.com

Javascript

HTML5

RDFFav

Ajouter et supprimer une classe CSS avec l’objet .classList

La meilleurs façon de modifier le style d’un élément est de changer la classe et ainsi d’éviter de modifier les attributs à la pièce.HTML5, CSS, className, classList

La meilleurs façon de modifier le style d’un élément est de changer la classe et d’éviter de modifier les attributs à la pièce. Cette technique est très efficace tout en étant plus simple! Il suffit de créer des classe CSS dans notre feuille de styles et de les associer à des éléments HTML via le Javasript. La technique peut se réaliser historiquement avec la méthode CSS2 .className.

Donc pour remplacer toutes les classes d’une élément par une nouvelle classe :

Modifier les classes d’un élément HTML

document.getElementById("monElement").className = "maClasse"; // Ou plusieurs classes, séparée par un espace. document.getElementById("monElement").className = "maClasse1 maClasse2";

Pour ajouter de nouvelles classes, sans supprimer celles déjà existantes :

document.getElementById("monElement").className += "maClasse3";

Supprimer les classes d’un élément HTML

C’est ici que ça se compliquait, à part le nouveau HTML5, il n’existe aucune méthode pour supprimer une classes sans affecter les autres classes. Il faut manipuler la liste en Javascript, de là l’usage rependu de la librairie jQuery. Il existe plusieurs façon de faire, c’est essentiellement une manipulation de chaine de caractères. Mais voilà une technique intéressante à l’aide des expressions régulières. Gourmand mais exécuté localement et l’avantage d’être compacte :

document.getElementById("monElement").className = document.getElementById("maClasse").className.replace( /(?:^|\s)MyClass(?!\S)/g , "" )

Cette expressions régulière permet de supprimer les occurrence d’un mot (maClasse) dans une liste de mots séparé par des espaces. En s’assurant de retirer les espaces. La même classe permet de savoir si une classe est déjà présente :

if ( document.getElementById("monElement").className.match(/(?:^|\s)maClasse(?!\S)/) )

Alternative

Si la librairie jQuery perd en utilité c’est au profit du HTML5 et l’objet classList.

jQuery

Absolument inutile d’utiliser cette librairie pour si peu, mais si elle est déjà en mémoire, pourquoi pas!

$("#monElement").addClass("maClasse"); $("#monElement").removeClass("maClasse"); if ( $("#monElement").hasClass("maClasse") )

Un petit truc jQuery, le « toggle » qui permet une permuter une classe. La classe est supprimer si elle existe sinon elle est ajouté. Utilisé par exemple pour l’effet accordéons.

$("#monElement").toggleClass("maClasse");

HTML5

html5 classList

Un nouvel objet HTML5 permet maintenant de gérer une liste de classes en quelques méthodes. Ce qui révolutionne aussi la plupart des problèmes booléens en CSS que jQuery réglait historiquement. On retrouve d’ailleurs partout la technique du « bouton radio » pour jouer avec le « vrais et faux » ou la permutation booléenne (toogle). Voir l’excellent tutoriel du Docteur HTML5 HTML5 Doctor - The classList API.

Voilà la liste des méthodes disponibles :

add()
pour ajouter une classe à la liste
remove()
pour supprimer une classe de la liste
contains()
pour vérifier si une classe fait partie de la liste
toggle()
pour permuter une classe dans une liste
item()
pour retourner une classe à une position spécifique dans une liste
toString()
pour convertir la liste en une chaîne de caractères
length
pour retourner le nombre de classe d’une liste
value
pour ajouter une propriété ou une méthode perso à l’objet « classList »

document.getElementById("monElement").classList.add("maClasse"); document.getElementById("monElement").classList.remove("maClasse"); if ( document.getElementById("monElement").classList.contains("maClasse") ) document.getElementById("monElement").classList.toggle("maClasse");

Incompatible Internet Explorer 9 et mois...

Exemple de permutation (toogle) de classe du Docteur HTML5

Notez que cet exemple utilise le nouvel méthode querySelectorAll très utile qui permet de cibler des éléments HTML à la manière jQuery.

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>classList.toggle() demo</title>
    <style>
      .cachee {
        overflow: hidden;
        max-height: 0;
      }
    </style>
  </head>

  <body>
    <nav role="navigation">
      <ul>
        <li><a href="#1">Menu 1</a></li>
        <li>
          <a href="#1" class="control">Menu 1</a>
          <ul class="subnav">
            <li><a href="#1">Sous-menu 1</a></li>
            <li><a href="#1">Sous-menu 2</a></li>
            <li><a href="#1">Sous-menu 3</a></li>
          </ul>
        </li>
        <li>
          <a href="#1" class="control">Menu 2</a>
          <ul class="subnav">
            <li><a href="#1">Sous-menu 1</a></li>
            <li><a href="#1">Sous-menu 2</a></li>
          </ul>
        </li>
        <li><a href="#1">Menu 3</a></li>
      </ul>
    </nav>

    <script>
      (function(doc) {
        var subnavs = doc.querySelectorAll(".subnav"),
        controls = doc.querySelectorAll(".control"),
        i = 0,
        j = 0,
        ii = subnavs.length,
        jj = controls.length,
        // Permutation des classes du menu.
        toggle_submenu = function(e) {
          var next = this.nextSibling;
          if(next.nodeType === 3) {
            next = next.nextSibling;
          }
          next.classList.toggle("cachee");
          e.preventDefault();
        };
        // Cache tous les sous-menus
        for(i; i<ii; i++) {
          subnavs[i].classList.add("cachee");
        }
        for(j; j<jj; j++) {
          controls[j].addEventListener("click", toggle_submenu, false);
        }
      })(document);
    </script>
  </body>
</html>
Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

       Visites : 19034 - Pages vues : 19787
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@