Changer la propriété CSS avec JavaScript

Pour modifier une propriété CSS avec JavaScript, sélectionnez l’élément visé, puis définissez une propriété sur son objet style. Pour appliquer plusieurs styles liés, ajoutez plutôt une classe CSS. Utilisez un ID ou un sélecteur CSS pour cibler un seul élément, et une collection basée sur une classe pour modifier toutes les correspondances. Le navigateur fournit l’objet document ; jQuery est facultatif.

Modifier une propriété CSS avec element.style

Utilisez element.style pour définir un style en ligne. En JavaScript, les noms de propriétés CSS contenant des traits d’union s’écrivent en camelCase : border-color devient borderColor. Cet exemple réduit permet d’exécuter le schéma de sélection et d’affectation dans un environnement JavaScript ; dans une page, document désigne le document réel du navigateur.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

L’affectation à style modifie le style en ligne de l’élément. Elle ne modifie pas une règle de feuille de style et ne supprime pas les autres styles. Dans le navigateur, la sélection correspondante est document.getElementById("email") ; vérifiez la valeur renvoyée avant de lire ou de modifier les propriétés de l’élément.

Appliquer plusieurs styles avec une classe CSS

Une classe est plus facile à gérer lorsqu’un état nécessite plusieurs déclarations coordonnées. Définissez une classe dans votre feuille de style, puis utilisez classList.add() pour l’appliquer et classList.remove() pour la retirer. Par exemple, une classe signalant une erreur de saisie peut définir à la fois une bordure rouge et un texte rouge. classList conserve les autres classes de l’élément.

L’affectation element.className = "input-error" modifie également l’attribut de classe, mais remplace toute la chaîne des classes. Les classes existantes, par exemple celles de mise en page ou de validation, sont perdues si elles ne figurent pas dans la nouvelle chaîne. Utilisez classList pour ajouter ou retirer des classes individuellement ; utilisez className lorsque vous souhaitez remplacer toutes les classes.

Sélectionner des éléments par classe avec getElementsByClassName

document.getElementsByClassName("input-blue-border") renvoie une HTMLCollection vivante des éléments correspondants, et non un tableau. Elle est mise à jour lorsque des éléments correspondants entrent dans le document ou en sortent. Pour modifier toutes les correspondances actuelles, parcourez la collection avec une boucle for...of et mettez à jour le style ou la liste de classes de chaque élément. Si vous avez besoin des méthodes de tableau, convertissez d’abord la collection avec Array.from(...).

Vous pouvez aussi appeler cette méthode sur un élément pour trouver les éléments descendants correspondants. Son argument est un nom de classe sans point initial ; utilisez .input-blue-border uniquement avec une API de sélecteur CSS comme querySelector().

Sélectionner un élément avec getElementById ou querySelector

document.getElementById("email") recherche un élément par son ID et renvoie l’élément correspondant ou null. Les ID doivent être uniques dans le document ; les ID en double sont invalides en HTML, ne vous fiez donc pas à l’élément qui pourrait être renvoyé en cas de doublon.

document.querySelector(".input-blue-border") accepte un sélecteur CSS et renvoie le premier élément correspondant, ou null si aucun ne correspond. Il peut cibler un ID (#email), une classe (.input-blue-border) ou une balise (input). Même si le sélecteur peut correspondre à plusieurs éléments, querySelector() ne renvoie que le premier. Vérifiez que le résultat n’est pas null avant d’en modifier le style ou les classes.

Choisir un sélecteur et gérer les correspondances absentes ou multiples

Choisissez le sélecteur en fonction de l’élément visé et du nombre d’éléments à modifier : utilisez getElementById pour un élément doté d’un ID unique, ou querySelector() si un sélecteur CSS est plus pratique et que seule la première correspondance vous intéresse. Utilisez getElementsByClassName lorsque vous devez modifier tous les éléments d’une classe. Pour une seule déclaration de style, définissez element.style ; pour un état nommé composé de plusieurs déclarations, activez ou retirez une classe.

La sélection peut échouer si l’élément n’est pas encore dans le document, si l’ID ou la classe comporte une faute de frappe, ou si le balisage n’a pas encore été chargé. Lancez la sélection une fois le balisage concerné disponible, ou vérifiez la valeur renvoyée avant d’accéder à style ou classList. Par exemple, dans le navigateur, vous pouvez écrire const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");. Pour ne modifier qu’un élément d’une collection de classe, choisissez-le explicitement ; pour les modifier tous, parcourez la collection.

Résumé

Commencez par sélectionner l’élément voulu. Définissez une seule déclaration en ligne avec element.style, ou utilisez classList pour appliquer plusieurs styles tout en conservant les classes existantes. getElementById cible un ID, querySelector() renvoie la première correspondance d’un sélecteur CSS, et getElementsByClassName fournit une collection vivante pour modifier toutes les correspondances d’une classe. Vérifiez le résultat d’une sélection d’élément unique avant de l’utiliser et parcourez la collection lorsque plusieurs éléments sont concernés.