Le CSSOM

Accueil » JavaScript » Le CSSOM

Le CSS Object Model (CSSOM) est un modèle de données qui représente la feuille de style en cascade (CSS) d’une page Web. Il décrit comment les règles CSS sont organisées et comment elles interagissent avec les éléments HTML dans le DOM (Document Object Model).

Le CSSOM est utilisé par le moteur de rendu du navigateur pour appliquer les règles CSS aux éléments HTML et déterminer comment afficher la page. Il peut être manipulé par du code JavaScript pour modifier les propriétés CSS des éléments de la page en temps réel.

Voici quelques exemples de ce que vous pouvez faire avec le CSSOM :

• Accéder aux règles CSS d’un élément en utilisant la propriété style de l’objet HTMLElement.
• Modifier les propriétés CSS d’un élément en utilisant les propriétés de l’objet HTMLElement.style.
• Accéder à toutes les règles CSS de la page en utilisant la propriété sheet de l’objet CSSStyleSheet.
• Ajouter de nouvelles règles CSS à la page en utilisant la méthode insertRule() de l’objet CSSStyleSheet.
• Modifier ou supprimer des règles CSS existantes en utilisant les méthodes deleteRule() et replaceRule() de l’objet CSSStyleSheet.

const element = document.getElementById('myElement');

// Modification de la couleur de l'élément en utilisant le CSSOM
element.style.color = 'red';

// Modification de la police de l'élément en utilisant le CSSOM
element.style.fontFamily = 'Arial';

// Ajout d'une règle CSS à la page en utilisant le CSSOM. Attention, veillez à avoir une feuille de style ou utiliser la balise style. Sinon, vous aurez une erreur !
const sheet = document.styleSheets[0];
sheet.insertRule('#myElement { background-color: yellow; }', sheet.cssRules.length);

// Modification d'une règle CSS existante en utilisant le CSSOM
sheet.cssRules[0].style.fontSize = '20px';

Ici, nous utilisons le CSSOM pour accéder à l’élément HTML avec l’identifiant myElement, puis nous modifions ses propriétés CSS en utilisant la propriété style de l’objet HTMLElement. Nous utilisons également le CSSOM pour accéder à la feuille de style de la page et y ajouter une nouvelle règle CSS, puis pour modifier une règle CSS existante.

Le CSSOM est un moyen puissant de manipuler l’apparence d’une page Web en temps réel avec du code JavaScript. Il peut être utilisé pour créer des effets visuels dynamiques, changer l’apparence d’un site en fonction de certaines conditions ou personnaliser l’apparence d’un site pour chaque utilisateur. Le CSSOM est lié au DOM et au HTMLOM (HTML Object Model), qui sont les modèles de données qui représentent respectivement le contenu et la structure d’une page Web. Ensemble, ils forment l’interface de programmation d’application (API) de la page Web, qui permet de manipuler le contenu et l’apparence de la page avec du code JavaScript.