Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
18 juin 2009 4 18 /06 /juin /2009 14:13

Les classes c'est bien :-). D'abord un rappel de leur utilité pour la présentation du blog (le CSS), ensuite le vif du sujet : leur emploi en JavaScript.

Pour mémoire : l'intérêt des classes

On en définit la présentation dans le CSS ("gros caractères bleus sur fond rose" ou "petits caractères centrés, encadrés, placés en bas de l'écran") et on les utilise dans le HTML, en donnant une ou plusieurs classes à l'élément (div, span, a, img…) dont on veut modifier l'aspect. Avantages :

  1. homogénéité : les porteurs d'une même classe ont tous le même aspect,
  2. lisibilité du code : lire dans du HTML class="avertissement" est plus parlant et plus simple que style="background:yellow;border:2px solid red; font-size:1.5em; text-align:center;",
  3. sémantique : utiliser des classes incite à se demander  qu'est-ce que c'est ? qu'est-ce que ça signifie ?  avant de se demander  à quoi ça va ressembler ? ,
  4. flexibilité 1 : changer l'aspect de TOUS les porteurs d'une même classe ne demande qu'UNE modification : dans le CSS,
  5. flexibilité 2 : changer l'aspect d'UN élément (ne) demande (que) de modifier sa classe et/ou d'en ajouter une autre, plutôt que de retravailler un style="..." long et obscur (voir aussi le point "lisibilité").

Classes et JavaScript

JavaScript permet de connaître et modifier la classe d'un élément. C'est très utile d'une part pour rechercher les éléments porteurs d'une certaine classe ou de plusieurs, d'autre part pour produire des effets dynamiques par changement de classe. Ainsi, en reprenant un exemple de la section précédente, un certain endroit de la page peut changer d'aspect en passant de la classe avertissement à la classe erreur.

JavaScript permet aussi, en théorie, d'intervenir directement sur les règles CSS et donc de modifier la définition d'une classe, mais les outils pour cela ne sont disponibles que dans quelques navigateurs. Dommage…

En pratique

Soit r la référence d'un élément de la page, référence obtenue par un moyen quelconque. Par exemple, pour travailler sur un div portant l'identifiant mon_ident, on écrirait :

 var r=document.getElementById('mon_ident') ; 

La classe (vide, un seul nom de classe ou une liste de noms de classe) de cet élément est r.className (en respectant majuscules et minuscules, comme toujours en JS). Voici quelques manipulations utiles à connaître.

Supprimer la classe de l'élément

 r.className=''; 
… ou, plus soigneusement :
 r.className=null; 

Le résultat est le même.

Changer la classe de l'élément

 r.className='autre_classe'; 
… et, plus généralement :
 r.className=/* une expression dont le résultat est une chaîne de caractères */ ; 

Tester l'existence de la classe

Très simple, par exemple

 if (r.className) {/* le cas où la classe existe*/} else {/* le cas où elle n'existe pas*/} 

Ajouter une classe à l'élément

Une classe peut contenir un ou plusieurs noms, séparés par des espaces. Certains navigateurs exigent que la liste ne commence pas par un espace. Ajouter un nom de classe à un élément demande donc une petite précaution : tester d'abord l'existence de la classe. Ce qui conduit à

 r.className += (r.className ? ' ' : '') + 'autre_classe'; 

Tester la valeur de la classe

Très simple aussi, par exemple

 if (r.className=='avertissement') {/* faire des choses */} 

Simple mais limité : le test ne réussit QUE si la classe de l'élément est EXACTEMENT la chaîne recherchée :
<div class="avertissement">....</div> passe le test mais
<div class="avertissement pas_grave">....</div> ne le passe pas.

Tester la présence d'un nom dans la liste des classes

Utile mais compliqué dans certains cas. Il faudra toujours commencer par tester l'existence de la classe. Le test proprement dit emploie une  expression rationnelle .


Première solution, simple et rapide mais pas totalement sûre :

 if (r.className && /\bnom\b/.test(r.className) ) {/* la classe contient le mot 'nom' en toutes lettres */} 

Version négative :

 if (!r.className || !(/\bnom\b/.test(r.className)) ) {/* la classe ne contient pas le mot 'nom' en toutes lettres */} 

Il s'agit bien de chercher un mot : nom, un nom commun passent le test, noms ou un_nom ne le passent pas.

Mais la définition d'une limite de mot (les deux \b de l'expression rationnelle) est un peu trop large : le tiret ou signe  moins  compte comme limite de mot, ce qui fait que un-nom passe le test et c'est gênant.

Règle pratique : n'employez pas ce caractère dans le nom des classes que vous écrivez, utilisez ma_classe ou maclasse plutôt que ma-classe.


Dans un blog OB la technique précédente vous causera des ennuis si, par exemple, vous cherchez la classe box. En effet, les div de classe box-titre, box-content et box-footer réussiront aussi le test.

Il faut donc que, avant la chaîne box, on trouve un espace ou le début de la classe et que, après cette chaîne, on trouve un espace ou la fin de la classe. Traduction proposée :

 if (r.className && /(?:\s|^)box(?:\s|$)/.test(r.className) ) {/* la classe contient le mot 'box' en toutes lettres */} 

Version négative :

 if (!r.className || !(/(?:\s|^)box(?:\s|$)/.test(r.className)) ) {/* la classe ne contient pas le mot 'box' en toutes lettres */} 

Les regExp, c'est puissant mais pas très lisible…

Remplacer ou supprimer un nom dans la liste des classes

Supprimer le nom, c'est le remplacer par une chaîne vide, d'où le regroupement de ces deux actions. Toujours des expressions rationnelles.

Version expéditive :

 r.className=r.className.replace(/\bvieuxnom\b/,'nouveaunom'); 

Version blindée :

 r.className=r.className.replace(/(?:\s|^)vieuxnom(?:\s|$)/,' nouveaunom '); 

Remarquez dans ce dernier cas les espaces d'encadrement. En effet la  limite de mot  (de la 1ère technique) n'est pas un caractère, juste un changement de caractère (largeur zéro) on ne fait que remplacer 'vieuxnom' par 'nouveaunom' . Dans la 2ème technique on englobe les espaces de séparation dans la recherche, c'est pourquoi on les rajoute autour de 'nouveaunom'.


Pour mémoire : d'autres liens JavaScript

par Aïe mes doigts ! - dans JavaScript Mania
commenter cet article

commentaires

Archives