JavaScript - Le CSS via JS

Alain Barraud

Mémento informatique

Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives

Page ouverte le 10/06/2009

JavaScript - Le CSS via JS

En JS, il est possible de modifier le style d'une page : modifier la couleur d'un bloc, sa position, ses dimensions, ses bordures, le masquer, etc.

Retour accueil JS

Sommaire partie 12

1 Sommaire
2 Exemples d'utilisation
3 Afficher / masquer un élément
4 Plusieurs classes pour un même élément
5 Notre fonction "getElementsByClassName"

Haut de page

Sommaire

Attributs des éléments de la page

id : valeur de l'attribut id de l'objet
className : valeur de l'attribut class de l'objet
style : sous-objet contenant les attributs CSS de l'objet

Attributs du sous-objet style

unAttributCss : valeur de l'attribut CSS un-attribut-css de l'élément.
On peut le modifier, mais on ne peut pas toujours lire sa valeur.

Noter bien la place des majuscules (qui sont ici soulignées) !
Ce sont uniquement les lettres qui suivent un tiret.

Pour accéder aux éléments

Les fonctions pour accéder aux éléments de la page sont des méthodes de l'objet document.

document.getElementById(id) : renvoie l'élément dont l'id est id ;
document.getElementsByTagName(nom) : renvoie un tableau contenant tous les éléments dont on a indiqué le nom de la balise (exemple : tous les div).

On va également définir :

document.getElementsByClassName(classe), qui renvoie un tableau contenant tous les éléments dont on a indiqué la classe ;
document.getElementsByClassName(classe, elmt), qui renvoie les éléments contenus dans elmt dont on a indiqué la classe.

Afficher ou masquer des éléments

On va définir :

toggleVisibility(elmt): pour rendre visible ou invisible l'élément elmt (qu'on peut également désigner par son id) ;
toggleDisplay(elmt) : pour afficher ou masquer l'élément.

Eléments ayant plusieurs classes

On va définir :

getClasses(elmt), qui renvoie un tableau contenant toutes les classes de l'élément elmt (qu'on peut également désigner par son id) ;
hasClassName(elmt, className), qui renvoie true si l'élément possède la classe className, false sinon.

Haut de page

Exemples d'utilisation

Modifier en JS des propriétés CSS

Un exemple basique.

En CSS

On a un élément dont l'id est exemple :

Code : HTML

1 <div id="exemple">Pif paf pouf</div>

On veut lui appliquer en JS le style suivant :

Code : CSS

1 #exemple
2 {
3 background-color: #ff0;
4 color: #0f0;
5 font-size: 1.2em;
6 text-align: center;
7 }

En JS

Voici comment le réaliser en JS :

Code : JavaScript

1 // on récupère l'élément
2 var elmt = document.getElementById("exemple");
3
4 // on modifie son style
5 elmt.style.backgroundColor = "#ff0";
6 elmt.style.color = "#0f0";
7 elmt.style.fontSize = "1.2em";
8 elmt.style.textAlign = "center";

Voir test 16

Style, class et id

En CSS

Rappel, on peut modifier le style d'un élément de trois façons différentes en CSS.

Soit en utilisant l'attribut style :
Code : HTML

1 <div style="color:#0f0">patati</div>
Soit en définissant une classe :
Code : CSS

1 .exemple { .. }

Code : HTML

1 <div class="exemple">patata</div>
Soit en utilisant un identifiant :
Code : CSS

1 #exemple { .. }

Code : HTML

1 <div id="exemple">tralala</div>

Et en JS ?

En JS, on dispose donc des attributs id et className pour lire ou modifier l'identifiant et la classe d'un élément.

Exemple : on modifie l'id, puis la classe d'un élément.

Code : JavaScript

1 document.getElementById("ancien_id").id = "nouvel_id";
2 document.getElementById("nouvel_id").className = "Une_classe";

Et on utilise le sous-objet style (comme vu un peu plus haut) pour modifier les propriétés indiquées dans l'attribut style de la balise.

Cela laisse pas mal de possibilités. Voyons, un exemple un peu plus délicat…

Commençons par définir un style par défaut ainsi qu'une classe :

Code : CSS

1 div
2 {
3 background-color: blue;
4 }
5
6 .rouge
7 {
8 background-color: red;
9 }

Ajoutons sur notre page un banal div pour faire nos expériences :

Code : HTML

1 <div id="test">Je suis un cobaye…</div>

Faisons-lui subir quelques changements de couleur…

Code : JavaScript

1 var divTest = document.getElementById("test");
2
3 divTest.className = "rouge";
4 divTest.backgroungColor = "green";
5 divTest.backgroungColor = "";
6 divTest.className = "";

Que se passe-t-il exactement ?

Au début, ni la classe ni le style ne sont définis.
La couleur d'arrière-plan est donc celle définie par défaut : le bleu.
Ensuite, on définit la classe de notre cobaye.
Celui-ci prend alors la couleur spécifiée dans cette dernière : le rouge.
On indique enfin une couleur directement grâce à style : elle est donc prioritaire sur la classe.
C'est pourquoi notre cobaye devient vert.
On supprime cet attribut.
Le cobaye reprend alors la couleur définie dans la classe : il vire au rouge.
On supprime finalement sa classe.
Il termine donc avec sa couleur par défaut, le bleu.

Déplacer un bloc en JS

Le bloc

Commençons par créer un bloc :

Code : HTML

1 <div id="test">Bonjour</div>

Rendons-le bien visible :

Code : CSS

1 #test
2 {
3 background-color: yellow;
4 text-align: center;
5 vertical-align: middle;
6 overflow: hidden;
7
8 position: absolute;
9 left: 0px;
10 top: 0px;
11 width: 300px;
12 height: 150px;
13 }

Les fonctions JS

Les attributs de l'objet style sont modifiables, mais il ne sont pas pratiques pour connaître la position de l'objet.

On va donc créer deux variables, x et y, pour enregistrer la position de notre bloc par rapport à la gauche et au haut de la fenêtre.

Code : JavaScript

1 var x = 0;
2 var y = 0;

Créons également une fonction pour déplacer notre bloc d'un certain nombre de pixels, horizontalement et verticalement.

Code : JavaScript

1 function deplacer(dx, dy)
2 {
3 var bloc = document.getElementById("test");
4 // on enregistre la nouvelle position
5 x += dx;
6 y += dy;
7 // on place le bloc
8 bloc.style.left = x + "px";
9 bloc.style.top = y + "px";
10 }

Les commandes

Il ne reste plus qu'à créer des boutons pour déplacer le bloc dans toutes les directions…

Code : HTML

1 <a href="javascript: deplacer(-10,0)">Gauche</a><br />
2 <a href="javascript: deplacer(10,0)">Droite</a><br />
3 <a href="javascript: deplacer(0,-10)">Haut</a><br />
4 <a href="javascript: deplacer(0,10)">Bas</a>

Voir test 17

Haut de page

Afficher / masquer un élément

Un grand classique du JS est d'afficher ou de masquer à volonté les éléments de la page.

On utilise simplement les propriétés CSS display et visibility, qu'on modifie à n'importe quel moment en utilisant l'objet style comme on a vu.

On va dans cette partie créer deux fonctions :

toggleVisibility(elmt) : pour rendre l'élément visible ou invisible
toggleDisplay(elmt) : pour afficher ou masquer l'élément.

Quelques remarques

visibility et display

Rappel en images de la différence entre les deux propriétés CSS suivantes :

Code : CSS

1 visibility: hidden;
2 display: none;

Affichage normal	visibility : hidden	display : none
L'élément est affiché normalement.	L'élément est invisible. Il occupe de la place sur la page.	L'élément n'est pas affiché. Il ne prend pas de place sur la page.

Petit "plus" de notre fonction

Il est agréable d'avoir des fonctions qui peuvent s'utiliser de deux manières différentes :

Code : JavaScript

1 // première façon : l'argument est un objet
2 var elmt = document.getElementById("mon_id");
3 toggle(elmt);
4
5 // seconde façon : l'argument est un identifiant
6 toggle("mon_id");

Pour cela, il suffit de débuter la fonction ainsi :

Code : JavaScript

1 function toggle(elmt)
2 {
3 if(typeof elmt == "string")
4 elmt = document.getElementById(elmt);
5 [..]
6 }

Les fonctions

toggleVisibility

Code : JavaScript

1 function toggleVisibility(elmt)
2 {
3 if(typeof elmt== "string")
4 elmt = document.getElementById(elmt);
5 if(elmt.style.visibility == "hidden")
6 elmt.style.visibility = "visible";
7 else
8 elmt.style.visibility = "hidden";
9 }

Si on veut qu'un élément soit masqué au chargement de la page, il est important de le préciser via son attribut style (et non via une classe), comme dans l'exemple ci-dessous.
Cette remarque est également valable pour la fonction toggleDisplay.

Code : HTML

1 <div style="visibility:hidden;">Il faudra m'afficher en JS</div>

Voir test 18

toggleDisplay

Code : JavaScript

1 function toggleDisplay(elmt)
2 {
3 if(typeof elmt== "string")
4 elmt = document.getElementById(elmt);
5 if(elmt.style.display == "none")
6 elmt.style.display = "";
7 else
8 elmt.style.display = "none";
9 }

Haut de page

Plusieurs classes pour un même élément

Il est possible d'attribuer plusieurs classes à un même objet, en les séparant par des espaces.

Par exemple, si on veut donner les classes titre et important à un DIV, on écrira :

Code : HTML

1 <div class="titre encadre important">Bonjour</div>

Récupérer les classes dans un tableau

Si on affiche en JS l'attribut className d'un objet, on récupère toutes les classes dans une seule chaîne de caractères.

Dans l'exemple précédent, ça donne :

Citation : div.className

titre encadre important

Pas très pratique.
Qu'à cela ne tienne, si on veut récupérer les noms de classes dans un tableau JS, il nous suffit d'utiliser la méthode split de l'objet String, pour découper notre chaîne de caractères aux endroits où se trouvent des espaces.
Il faut penser qu'il peut y avoir plusieurs espaces, on va donc utiliser une regex pour le découpage.
De plus, dans le cas où l'élément ne possède aucune classe, la fonction split renvoie quand même un tableau qui contient une chaîne vide : dans ce cas, on la retire du tableau.

Créons donc une fonction qui renvoie toutes les classes d'un élément, sous forme de tableau :

Code : JavaScript

1 function getClasses(elmt)
2 {
3 if(typeof elmt== "string")
4 elmt = document.getElementById(elmt);
5 var classes = elmt.className.split(/ +/g);
6 if(classes.length == 1 && classes[0] == "")
7 classes.pop();
8 return classes;
9 }

Savoir si un objet possède une classe donnée

Les multi-classes posent un autre problème : pour savoir si un objet possède une classe X, on ne peut plus faire tout simplement :

Code : JavaScript

1 if(elmt.className == "X");

Pour y remédier, le plus simple est d'utiliser… les regex !
Pour chercher le mot X, on utilise la regex : /\bX\b/.

Dans une regex, \b indique le début ou la fin d'un mot.

Donc, si on veut créer une fonction hasClassName(elmt, className), qui renvoie true si elmt possède la classe className, false sinon :

Code : JavaScript

1 function hasClassName(elmt, className)
2 {
3 if(typeof elmt == "string")
4 elmt = document.getElementById(elmt);
5 var regex = new RegExp("\\b") + className + "\\b");
6 return regex.test(elmt.className);
7 }

Voilà, tout ce qu'il y a à savoir sur les multi-classes.

Haut de page

Notre fonction "getElementsByClassName"

Présentation

Terminons ce chapitre avec une dernière fonction, dont le but est de récupérer tous les éléments HTML d'une classe donnée.
Comme il n'en existe pas, nous allons la créer.

Notre fonction possèdera un argument obligatoire : le nom de la classe.
L'argument suivant, facultatif, sera l'élément "racine" pour la rechercher : s'il n'est pas précisé, on recherche dans tout le document. Sinon, on cherche uniquement parmi les "fils" de cet élément.

Nous utiliserons également une regex pour savoir si la fonction possède la classe recherchée, afin de la rendre compatible avec les multi-classes.

Petit rappel :
les tableaux possèdent la méthode push pour rajouter un élément à la fin.

Notre fonction

Voici, avec les commentaires nécessaires, la fonction ainsi créée :

Code : JavaScript

1 document.getElementsByClassName = function(className, elmt)
2 {
3 var selection = new Array();
4 var regex = new RegExp("\\b") + className + "\\b");
5
6 // le second argument, facultatif
7 if(!elmt)
8 elmt = document;
9 else if(typeof document == "string")
10 elmt = document.getElementById(elmt);
11
12 // on sélectionne les éléments ayant la bonne classe
13 var elmts = elmt.getElementsByTagName("*");
14 for(var i=0; i<elmts.length; i++)
15 if(regex.test(elmts[i].className))
16 selection.push(elmts[i]);
17
18 return selection;
19 }

Haut de page

Finalement, ce qu'il faut retenir de ce chapitre, c'est :

que la (ou les) classe(s) d'un élément sont accessibles grâce à l'attribut JS className ;
qu'on peut modifier toutes les propriétés CSS d'un élément de manière très simple :

Code : JavaScript

1 document.getElementById("id").style.uneProprieteCss = "Nouvelle valeur";

Haut de page