• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Le CSS via JS

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 ? :)

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.

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.

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 :

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

On veut lui appliquer en JS le style suivant :

#exemple
{
   background-color: #ff0;
   color: #0f0;
   font-size: 1.2em;
   text-align: center;
}
En JS

Voici comment réaliser ceci en JS :

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

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

    .exemple { .. }
    <div class="exemple">patata</div>
  • Soit en utilisant un identifiant :

    #exemple { .. }
    <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.

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 :

div
{
   background-color: blue;
}

.rouge
{
   background-color: red;
}

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

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

Faisons-lui subir quelques changements de couleur...

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 :

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

Et rendons-le bien visible :

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

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.

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

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

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 :

visibility: hidden;
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.

Image utilisateurImage utilisateurvisibility : hiddenvisibility : hiddendisplay : nonedisplay : none
Petit "plus" de notre fonction

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

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

function toggle(elmt)
{
   if(typeof elmt == "string")
      elmt = document.getElementById(elmt);
   [..]
}

Les fonctions

toggleVisibility
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";
}
<div style="visibility:hidden;">Il faudra m'afficher en JS</div>
toggleDisplay
function toggleDisplay(elmt)
{
   if(typeof elmt == "string")
      elmt = document.getElementById(elmt);
   if(elmt.style.display == "none")
      elmt.style.display = "";
   else
      elmt.style.display = "none";
}

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 :

<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 :

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 :

if(emlt.className == "X");

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

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

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

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.

Notre fonction

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

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;
}

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 :

    document.getElementById("id").style.uneProprieteCss = "Nouvelle valeur";
Exemple de certificat de réussite
Exemple de certificat de réussite