JavaScript - Manipuler le style et les images avec JavaScript

Modifier le style d'un élément

Chaque élément HTML possède une propriété .style accessible en JS.

const titre = document.getElementById("titre");
titre.style.color = "red";
titre.style.fontSize = "2em";
titre.style.display = "none"; // cache l'élément

Règle de conversion : les propriétés CSS avec un tiret s'écrivent en camelCase en JS.

Les valeurs sont toujours des strings :

titre.style.fontSize = "24px";   // ✅
titre.style.fontSize = 24;       // ❌ (nombre sans unité, ignoré)

Exemple concret

<p id="message">Attention !</p>
<button onclick="mettreEnEvidence()">Mettre en évidence</button>

<script>
  function mettreEnEvidence() {
    const msg = document.getElementById("message");
    msg.style.color = "white";
    msg.style.backgroundColor = "crimson";
    msg.style.padding = "8px 16px";
    msg.style.borderRadius = "4px";
  }
</script>

Ajouter / retirer une classe CSS

Modifier .style directement, c'est bien pour un changement ponctuel. Pour des états réutilisables (actif, erreur, caché…), préfère manipuler des classes.

/* Dans ton CSS */
.surbrillance {
  background-color: yellow;
  font-weight: bold;
}

const el = document.getElementById("titre");

el.classList.add("surbrillance");     // ajoute la classe
el.classList.remove("surbrillance");  // retire la classe
el.classList.toggle("surbrillance");  // ajoute si absente, retire si présente

toggle est particulièrement pratique pour les boutons on/off

(menu, dark mode, accordéon…).

Changer l'image affichée

Une image HTML a un attribut src. JS peut le modifier comme n'importe quelle propriété.

<img id="photo" src="chat.jpg" alt="Un chat">
<button onclick="changerImage()">Changer</button>

<script>
  function changerImage() {
    const img = document.getElementById("photo");
    img.src = "chien.jpg";
  }
</script>

Exemple : galerie avec un seul img

<img id="galerie" src="photo1.jpg" alt="Galerie">
<button onclick="afficher('photo1.jpg')">1</button>
<button onclick="afficher('photo2.jpg')">2</button>
<button onclick="afficher('photo3.jpg')">3</button>

<script>
  function afficher(nomFichier) {
    document.getElementById("galerie").src = nomFichier;
  }
</script>

Changer aussi le alt

Bonne pratique : mets à jour alt en même temps que src pour l'accessibilité.

const img = document.getElementById("photo");
img.src = "chien.jpg";
img.alt = "Un chien";

À retenir

• .style.propriété → modification directe, valeur toujours en string avec unité.
• .classList.toggle() → préférable pour des états définis dans le CSS.
• .src → change l'image affichée à la volée.