Aller au menu - Aller au contenu

Icône Le CSS via JS

Par Avatar JoSé2
Mise à jour : 22/07/2009
5 116 visites depuis 7 jours, dont 126 sur ce chapitre classé 38/786
En JS, il est possible de modifier le style de votre page : modifier la couleur d'un bloc, sa position, ses dimensions, ses bordures, le masquer, etc.

C'est à la fois simple et utile, alors pourquoi s'en priver ? :)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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.

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


Vous trouverez une liste de propriétés CSS en annexe du tutoriel XHTML / CSS.



Pour accéder aux éléments



Ces 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).

Nous allons é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



Nous allons 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.



Éléments ayant plusieurs classes



Nous allons 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.
Retour en haut

Exemples d'utilisation

Modifier en JS des propriétés CSS



Commençons par 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
2
3
4
5
6
7
#exemple
{
   background-color: #ff0;
   color: #0f0;
   font-size: 1.2em;
   text-align: center;
}



En JS



Voici comment réaliser ceci en JS :

Code : JavaScript
1
2
3
4
5
6
7
8
// on récupère l'élément
var elmt = document.getElementById("exemple");

// on modifie son style
elmt.style.backgroundColor = "#ff0";
elmt.style.color = "#0f0";
elmt.style.fontSize = "1.2em";
elmt.style.textAlign = "center";




Style, class et id




En CSS



Comme vous le savez sûrement, 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, nous disposons donc des attributs id et className pour lire ou modifier l'identifiant et la classe d'un élément.

Voici un exemple : on modifie l'id, puis la classe d'un élément.
Code : JavaScript
1
2
document.getElementById("ancien_id").id = "nouvel_id";
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.


Ceci nous laisse pas mal de possibilités.
Voyez plutôt, à travers cet exemple un peu plus délicat...

Commençons par définir un style par défaut ainsi qu'une classe :
Code : CSS
1
2
3
4
5
6
7
8
9
div
{
   background-color: blue;
}

.rouge
{
   background-color: red;
}


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
2
3
4
5
6
var divTest = document.getElementById("test");

divTest.className = "rouge";
divTest.style.backgroundColor = "green";
divTest.style.backgroundColor = "";
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



Maintenant qu'on a bien joué avec les couleurs, amusons-nous à déplacer un bloc.


Le bloc



Pour cela, commençons par créer un bloc :
Code : HTML
1
<div id="test">Bonjour</div>


Et rendons-le bien visible :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#test
{
   background-color: yellow;
   text-align: center;
   vertical-align: middle;
   overflow: hidden;

   position: absolute;
   left: 0px;
   top: 0px;
   width: 300px;
   height: 150px;
}



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



Les commandes



Il ne nous reste plus qu'à créer des boutons pour déplacer notre bloc dans toutes les directions...
Code : HTML
1
2
3
4
<a href="javascript: deplacer(-10,0)">Gauche</a><br />
<a href="javascript: deplacer(10,0)">Droite</a><br />
<a href="javascript: deplacer(0,-10)">Haut</a><br />
<a href="javascript: deplacer(0,10)">Bas</a>
Retour en haut

Afficher / masquer un élément

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

Derrière ce tour de passe-passe se cachent simplement les propriétés CSS display et visibility, qu'on modifie à n'importe quel moment en utilisant l'objet style comme vous avez appris à le faire.

Nous allons 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



Rappelons en images la différence entre les deux propriétés CSS suivantes :
Code : CSS
1
2
visibility: hidden;
display: none;


Affichage normalvisibility : hiddendisplay : 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.
Image utilisateur visibility : hidden display : none



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
2
3
4
5
6
// première façon : l'argument est un objet
var elmt = document.getElementById("mon_id");
toggle(elmt);

// seconde façon : l'argument est un identifiant
toggle("mon_id");


Pour cela, il suffit de débuter la fonction ainsi :
Code : JavaScript
1
2
3
4
5
6
function toggle(elmt)
{
   if(typeof elmt == "string")
      elmt = document.getElementById(elmt);
   [..]
}



Les fonctions



toggleVisibility



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


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>



toggleDisplay



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

Plusieurs classes pour un même élément

Comme vous le savez sûrement, 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, encadre 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 nous 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
2
3
4
5
6
7
8
9
function getClasses(elmt)
{
   if(typeof elmt == "string")
      elmt = document.getElementById(elmt);
   var classes = elmt.className.split(/ +/g);
   if(classes.length == 1 && classes[0] == "")
      classes.pop();
   return classes;
}




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(emlt.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
2
3
4
5
6
7
function hasClassName(elmt, className)
{
   if(typeof elmt == "string")
      elmt = document.getElementById(elmt);
   var regex = new RegExp("\\b" + className + "\\b");
   return regex.test(elmt.className);
}


Et voilà, vous savez tout sur les multi-classes. :)
Retour en haut

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
document.getElementsByClassName = function(className, elmt)
{
   var selection = new Array();
   var regex = new RegExp("\\b" + className + "\\b");

   // le second argument, facultatif
   if(!elmt)
      elmt = document;
   else if(typeof elmt == "string")
      elmt = document.getElementById(elmt);
   
   // on sélectionne les éléments ayant la bonne classe
   var elmts = elmt.getElementsByTagName("*");
   for(var i=0; i<elmts.length; i++)
      if(regex.test(elmts[i].className))
         selection.push(elmts[i]);

   return selection;
}
Retour en haut
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";
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
7 commentaires pour "Le CSS via JS"
Note moyenne : 3.51 / 4 (260 votes)
Pseudo Commentaire
Hors ligne maneHartk # Posté le 16/06/2009 à 22:00:51
http://lwn.net/Articles/104179
Avatar

Études : SUPINFO Alsace à Illkirch

 Exact, c'est bien elmt == "string".

Cette fonction est un peu en carton, je conseille de l'utiliser comme preuve de concept et pour la comprehension seulement.
Hors ligne maneHartk # Posté le 16/06/2009 à 22:00:56
http://lwn.net/Articles/104179
Avatar

Études : SUPINFO Alsace à Illkirch

 Exact, c'est bien elmt == "string".

Cette fonction est un peu en carton, je conseille de l'utiliser comme preuve de concept et pour la comprehension seulement.
Hors ligne maneHartk # Posté le 16/06/2009 à 22:01:09
http://lwn.net/Articles/104179
Avatar

Études : SUPINFO Alsace à Illkirch

 Exact, c'est bien elmt == "string".

Cette fonction est un peu en carton, je conseille de l'utiliser comme preuve de concept et pour la comprehension seulement.
Hors ligne maneHartk # Posté le 16/06/2009 à 22:01:12
http://lwn.net/Articles/104179
Avatar

Études : SUPINFO Alsace à Illkirch

 Exact, c'est bien elmt == "string".

Cette fonction est un peu en carton, je conseille de l'utiliser comme preuve de concept et pour la comprehension seulement.
Hors ligne pierrebr # Posté le 12/01/2010 à 16:13:01

Bonjour Zéros !
Bien que je sois nul en js et que je rame comme un fou sur ce tuto, :colere2: j'ai remarqué un problème dans la parie "les fonctions js" pour la fonction deplacer.
En effet si on applique l'exemple, on place le bloc "test" comme il est indiqué :
position: absolute;
left: 0px;
top: 0px;

à la fin quand on va mettre les commandes :
<a href="javascript: deplacer(-10,0)">Gauche</a><br />
<a href="javascript: deplacer(10,0)">Droite</a><br />
<a href="javascript: deplacer(0,-10)">Haut</a><br />
<a href="javascript: deplacer(0,10)">Bas</a>

sans leur donner de position particulière, on les voit pas. :euh: Car elles se mettent par défaut à:
left: 0px;
top: 0px;
et elle sont cachées par le bloc.

Cordialement
pierrebr

Voir tous les commentaires