Accès aux feuilles de style par le DOM

I. Généralités

a. Introduction

Le DOM permet d'accéder aux feuilles de style d'un document, grâce à un objet de feuille de style. Mais une difficulté -importante- réside dans le fait que la syntaxe CSS n'est pas arborescente. On doit donc utiliser des méthodes et propriétés spécifiques.

b. Accès à l'objet de feuille de style

On définit simplement un objet de feuille de style à l'aide de la collection document.styleSheets. Par exemple, feuille1=document.styleSheets[0] permet d'accéder à la première feuille de style du document, qu'elle soit interne ou externe. On peut alors obtenir plusieurs informations.

II. Propriétés générales de la feuille de style

a. Accès aux attributs de l'élément style

Chaque attribut type, href, media, title et disabled est accessible directement par une propriété. Par exemple, une fois l'objet feuille1 défini, feuille1.href permet de consulter ou changer le lien vers la feuille de style (et donc, éventuellement, d'en appliquer une autre).

b. Tableau des propriétés de style

On peut accéder à la liste des règles de la feuille à l'aide du tableau cssRules. Par exemple, feuille1.cssRules[0] désigne la première règle de la feuille de style.

III. Modification, ajout et suppression de règles

1. Ajout et suppression de règles

a. Suppression d'une règle

Une fois une règle sélectionnée, on peut la supprimer à l'aide de la méthode deleteRule(index). Par exemple, feuille1.deleteRule(0) supprime la première règle de la feuille.

b. Ajout d'une règle

On peut ajouter une règle à la feuille de style avec la méthode insertRule(propriete, index). index donne la position où doit être insérée la règle. Par exemple, feuille1.insertRule(".blanc { color: white }", 0) ajoute une propriété au tout début de la feuille de style.

2. L'élément de propriété de feuille de style

Dans toute la suite, on suppose défini un objet de propriété de feuille de style par regle=feuille1.cssRules[1].

b. Avoir des informations

La propriété regle.cssText renvoie le texte entier de la règle (par exemple p{text-align:justify;}).

La propriété regle.parentStyleSheet renvoie une référence à la feuille de style à laquelle appartient la propriété.

c. Sélecteur et propriété

La propriété regle.style.cssText retourne le texte de la propriété (par exemple text-align:justify;), tandis que regle.style.selectorText permet d'accéder (en lecture et écriture) au sélecteur (par exemple p).

Exercice 1. Ajout et suppression de règles

Énoncé

Correction