Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. JavaScript pour l'intégrateur web
  3. Les CSS et le code JavaScript
Extrait - JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
Extraits du livre
JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
2 avis
Revenir à la page d'achat du livre

Les CSS et le code JavaScript

Introduction

Rappelons que l’un des objectifs du code JavaScript est de dynamiser les pages web, d’ajouter de l’interaction avec les visiteurs. Eh bien, nous allons pouvoir utiliser JavaScript pour interagir sur les CSS, suite à des événements utilisateur, par exemple.

Accéder aux propriétés CSS

1. Les CSS en ligne

Nous avons vu précédemment comment accéder à de nombreuses propriétés des objets via JavaScript. Les propriétés CSS ne dérogent pas à cette règle.

Voici un élément HTML simple :


<h1 id="titre1">Vulputate Sollicitudin Condimentum Bibendum</h1>
 

Pour accéder aux propriétés CSS de cet objet, nous allons utiliser la propriété style de l’objet HTMLelement.

Attention, cette propriété ne permet d’accéder qu’aux styles CSS en ligne des éléments ciblés, c’est-à-dire aux propriétés CSS déclarées dans l’attribut style="..." de l’élément. Nous n’accédons pas aux styles CSS déclarés dans l’élément <style> ou ceux déclarés dans un fichier .css lié à la page.

Pour accéder aux propriétés CSS de cet élément et pour les afficher dans la console, voici le script très simple utilisé :


<script> 
    var monTitre1 = document.getElementById("titre1") ; 
    console.log(monTitre1.style) ; 
</script>
 

Voici l’affichage obtenu :

images/C05-001.png

La console affiche la déclaration...

Appliquer des styles CSS

1. Appliquer des styles en ligne

Dans cet exemple, nous allons appliquer des styles CSS à un élément ciblé. Les styles appliqués seront placés dans la balise d’ouverture de l’élément, dans l’attribut style.

Voici la page HTML, avec l’élément <h2> ciblé qui ne possède pas de style :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <h2 id="titre2">Bibendum Vestibulum Parturient</h2> 
    </body> 
</html>
 

Voici l’affichage initial :

images/C05-011.png

Voici le code JavaScript utilisé :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <h2 id="titre2">Bibendum Vestibulum Parturient</h2> 
        <script> 
            var monTitre2 = document.getElementById("titre2") ; 
            monTitre2.style.color = "#FF0000" ; 
            monTitre2.style.backgroundColor = "silver" ; 
        </script> 
    </body> 
</html>
 

Analysons ce code très simple :

  • Dans la variable monTitre2, nous référençons l’élément <h2> ciblé.

  • Pour l’élément monTitre2, avec le sous-objet style, nous appliquons à la propriété CSS color la valeur #FF0000, soit une couleur rouge au texte.

  • Nous ajoutons une couleur argentée, silver, en arrière-plan.

Notez bien la syntaxe JavaScript de la propriété d’arrière-plan backgroundColor.

Voici l’affichage obtenu :

images/C05-005.png

Affichez le code source et visualisez l’application de ces propriétés CSS dans l’attribut style :


<h2 id="titre2"...

Affichage dynamique dans un formulaire

Dans cet exemple, nous allons donner la possibilité aux utilisateurs d’afficher et de masquer une partie d’un formulaire. C’est une fonctionnalité assez classique qui permet d’afficher des options quand l’utilisateur clique sur une case à cocher, par exemple.

Voici la structure de la page HTML et du formulaire :


<form id="inscription" name="formulaire" method="post" action="#"> 
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <form id="inscription" name="formulaire" method="post" action="#"> 
            <p> 
                <label for="nom">Nom : </label> 
                <input id="nom" name="nom" type="text"> 
            </p> 
            <p> 
                <label for="prenom">Prénom : </label> 
                <input id="prenom" name="prenom"...