Cours de manipulation du DOM et DHTML Accès aux feuilles de style par le DOM G. Chagnon Le DOM offre des propriétés et méthodes permettant d'accéder et modifier les propriétés des feuilles de style CSS. dhtml, dom, javascript, css, propriété, style 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. 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. 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). 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.

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. 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.

Dans toute la suite, on suppose défini un objet de propriété de feuille de style par regle=feuille1.cssRules[1]. 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é. 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).