• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 05/07/2019

Donnez du style à vos éléments

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

Le langage JavaScript permet non seulement d'interagir avec la structure d'une page web, mais aussi de modifier le style de ses éléments. Découvrons comment faire dans ce chapitre.

La page web d'exemple

Créez le fichier chapitre_4/html/cours.html et donnez-lui le contenu ci-dessous.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/cours.css">
    <title>Les styles avec JavaScript</title>
</head>

<body>
    <p>Primo...</p>
    <p style="color: green;">Secundo...</p>
    <p id="para">Tertio...</p>

    <script src="../js/cours.js"></script>
</body>

</html>

Ensuite, créez un répertoire nommé css dans le répertoire chapitre_4, puis un fichier cours.css dans le répertoire css . Donnez à ce fichier le contenu suivant.

#para {
    font-style: italic;
    color: blue;
}

Le fichier cours.css est ce qu'on appelle une feuille de style écrite à l'aide du langage CSS. Les règles qu'elle contient modifient la présentation de certains éléments de la page web qui l'inclut via la balise <link rel="stylesheet" href="../css/cours.css">. Ici, la feuille contient une seule règle qui modifie le style de l'élément identifié par para dans la page web : le texte sera écrit en italique et de couleur bleue.

Les exemples de code JavaScript sont à tester dans le fichier chapitre_4/js/cours.js.

Modifier le style d'un élément

La propriété style

Les éléments du DOM disposent d'une propriété nommée style qui renvoie un objet représentant l'attribut  style de l'élément. Les propriétés de cet objet correspondent aux propriétés CSS de l'élément. En définissant leur valeur depuis JavaScript, on modifie le style de l'élément.

Le code ci-dessous sélectionne le premier paragraphe (balise <p> ) de la page, puis modifie la couleur du texte et les marges de ce paragraphe.

var pElt = document.querySelector("p");
pElt.style.color = "red";
pElt.style.margin = "50px";

Les propriétés CSS composées

Certaines propriétés CSS s'écrivent sous la forme d'un nom composé. Pour utiliser ces propriétés en JavaScript, il faut supprimer le tiret et écrire la première lettre du mot suivant en majuscule.

L'exemple ci-dessous modifie les propriétés CSS font-family et background-color du paragraphe sélectionné plus haut.

// ...
pElt.style.fontFamily = "Arial";
pElt.style.backgroundColor = "black";

La liste des principales propriétés CSS et leurs équivalents Javascript est consultable à cette adresse.

Accéder au style d'un élément

Les limites de la propriété style

Essayons d'utiliser la propriété style pour récupérer les propriétés CSS d'un élément. L'exemple suivant affiche la couleur du texte de chacun des trois paragraphes de notre page web.

var paragraphesElts = document.getElementsByTagName("p");
console.log(paragraphesElts[0].style.color); // Affiche "red"
console.log(paragraphesElts[1].style.color); // Affiche "green"
console.log(paragraphesElts[2].style.color); // N'affiche rien

La couleur du texte du troisième paragraphe (blue) n'apparait pas... Pourquoi ?

Pour répondre à cette question, il faut comprendre que la propriété style  utilisée en JavaScript représente l'attribut style de l'élément. Elle ne permet pas d'accéder aux déclarations de style situées ailleurs, par exemple dans une feuille de style CSS externe. Le style du troisième paragraphe, défini dans la feuille cours.css, n'est donc pas récupérable en JavaScript via la propriété style .

La fonction getComputedStyle

La bonne solution pour accéder au style d'un élément consiste à utiliser une fonction nommée  getComputedStyle. Elle prend en paramètre un noeud du DOM et renvoie un objet représentant son style. On peut ensuite consulter les différentes propriétés CSS de cet objet.

L'exemple suivant affiche certaines propriétés CSS du troisième paragraphe.

var stylePara = getComputedStyle(document.getElementById("para"));
console.log(stylePara.fontStyle); // Affiche "italic"
console.log(stylePara.color); // Affiche la couleur bleue en valeurs RGB

En résumé

Voici ce qu'il faut retenir de ce chapitre consacré à la gestion des styles.

  • La propriété JavaScript style représente l'attribut style d'un élément du DOM. Elle permet de modifier le style de cet élément en définissant la valeur de ses propriétés CSS.

  • Les propriétés CSS composées s'écrivent avec la norme camelCase en JavaScript. Par exemple, font-family devient fontFamily .

  • La propriété JavaScript style est insuffisante pour accéder au style d'un élément. Pour cela, on utilise la fonction getComputedStyle.

A vous de jouer !

Réalisez ces exercices dans le répertoire chapitre_4.

Modification des couleurs (résultat à obtenir)

Créez le fichier html/couleurs.html et donnez-lui le contenu ci-dessous.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Couleurs</title>
</head>

<body>
    <h1>Paragraphe 1</h1>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim fringilla dapibus. Curabitur placerat efficitur molestie. Quisque quis consequat nibh. Aenean feugiat, eros eget aliquam vulputate, leo augue luctus lectus, non lobortis libero quam non sem. Aliquam sit amet tincidunt ex, mollis interdum massa. Sed vulputate mi id accumsan scelerisque. Nam interdum iaculis ipsum, non convallis mauris faucibus et. Pellentesque in imperdiet lorem, in condimentum neque. Nullam auctor sem eu sapien pulvinar, non ultricies ipsum hendrerit. Aliquam at magna convallis, ultrices enim vitae, mollis lacus.</div>

    <h1>Paragraphe 2</h1>
    <div>Vivamus at justo blandit, ornare leo id, vehicula urna. Fusce sed felis eget magna viverra feugiat eget nec orci. Duis non massa nibh. Aenean vehicula velit a magna lobortis tempor ut quis felis. Proin vitae dui a eros facilisis fringilla ut ut ante. Curabitur eu magna dui. Ut hendrerit suscipit metus, id vehicula velit. Pellentesque ac nisl rutrum, efficitur velit dictum, cursus odio.</div>

    <h1>Paragraphe 3</h1>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet pharetra massa. Nulla blandit erat nulla, et scelerisque libero varius ut. Praesent bibendum eu magna ullamcorper venenatis. Sed ut pellentesque leo. Sed ultrices sapien consequat odio posuere gravida. Nunc lorem tortor, volutpat nec maximus in, suscipit a ex. Praesent efficitur ex ut viverra placerat. Vivamus eu sapien sed enim vehicula sodales.</div>

    <script src="../js/couleurs.js"></script>
</body>

</html>

Ensuite, codez le fichier js/couleurs.js afin de faire saisir à l'utilisateur la nouvelle couleur du texte puis la nouvelle couleur de fond des trois paragraphes de la page web. Les couleurs sont saisies sous leur nom anglais ou bien en valeurs RGB.

Résultat avec du texte blanc sur fond rouge
Résultat avec du texte blanc sur fond rouge

Informations sur un élément (résultat à obtenir)

Ecrivez le fichier html/infos.html ayant le contenu ci-dessous.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/infos.css">
    <title>Informations</title>
</head>

<body>
    <div id="contenu">ABC
        <br>Easy as
        <br>One, two, three
    </div>
    <div id="infos"></div>

    <script src="../js/infos.js"></script>
</body>

</html>

Ecrivez le fichier css/infos.css associé.

#contenu {
    float: right;
    margin-top: 100px;
    margin-right: 50px;
}

Enfin, créez et codez le fichier js/infos.js qui ajoute à la page web une liste affichant la hauteur et la longueur de l'élément identifié par "contenu".

Solutions des exercices

Le code source des solutions est consultable en ligne.



Exemple de certificat de réussite
Exemple de certificat de réussite