Rechercher  

Il est possible, en utilisant le langage Javascript , de changer le style appliqué à un ou plusieurs éléments HTML. D'une part, en utilisant le DHTML, on peut modifier l'apparence d'un élément ("calque" repéré par un identifiant) particulier, d'autre part, avec le DOM (Document Object Model), la règle de style elle-même peut être changée, à la volée, appliquant la modification, donc, à l'ensemble des éléments du document concerné par cette règle.
Nous explorerons dans la suite de cet article cette deuxième possibilité. Pour une introduction au DOM, vous pouvez consulter l'article suivant. Pour des rappels exhaustifs sur CSS, une rubrique dédiée est à votre disposition.

Prenons la règle CSS suivante:

H1 {color: #660000; font-family: Verdana; font-size: 16pt; font-weight: bold }

Supposons que cette règle soit la troisième règle de notre feuille de style (unique), alors on accédera à cette règle via le DOM en écrivant:

document.styleSheets[0].cssRules[2] (Netscape 6)
document.styleSheets[0].rules[2] (IE 4+)

(il s'agit de la première, car ici unique, feuille de style - styleSheets[0] - appliquée au document, et de la troisième règle - la numérotation partant de 0). Notez la différence entre Netscape (qui s'accorde avec les recommandations du W3C) et IE.

Une fois la règle "atteinte", et placée dans une variable (par exemple "regle"), alors on peut modifier tout ou partie du style correspondant:

regle.style.color="#000066"

On peut donc définir une fonction de la forme:

function changeCouleurH1(couleur) {
  if (!document.styleSheets) return;
  var regles=new Array();
  if (document.styleSheets[0].cssRules) regles=document.styleSheets[0].cssRules
  else if (document.styleSheets[0].rules) regles = document.styleSheets[0].rules
  else return
  regles[2].style.color = couleur;
}

Cliquer sur les boutons suivant pour une démonstration:

Texte en style H1

Autre texte en style H1

Le code HTML correspondant à cet exemple étant le suivant:

<h1>Texte en style H1</h1>Texte normal<h1>Autre texte en style H1</h1>
<input type="submit" name="#000066" value="bleu foncé" onClick="changeCouleurH1(this.name)">
<input type="submit" name="#660000" value="rouge foncé" onClick="changeCouleurH1(this.name)">

Il est également possible d'ajouter ou de retrancher des règles CSS à la feuille de style:

document.styleSheets[0].insertRule('H2 {font: 12px Verdana}',                                                                   document.styleSheets[0].cssRules.length)
(Netscape 6 - le deuxième argument permet de sélectionner l'emplacement de la règle, ici insérée à la fin)
document.styleSheets[0].addRule('H2 {font: 12px Verdana}')
(IE 4+ - la règle est toujours insérée à la fin)

et (suppression d'une règle):

document.styleSheets[0].deleteRule(2)
(Netscape 6 - l'indice donne l'emplacement de la règle dans la feuille de style)
document.styleSheets[0].removeRule(2);
(IE 4+- l'indice donne l'emplacement de la règle dans la feuille de style)

Enfin, pour changer de feuille de style (IE 4+ uniquement):

document.styleSheets[0].href='feuille.css'

et pour désactiver les feuilles de style (Netscape 6 et IE 4+):

document.styleSheets[0].disabled=true

[Jérôme Morlon, 28 mai 2002 , JDNet]

Les outils de développement dans le Guide des Solutions
e-business

L'encyclopédie JDNet Toutes les notions pratiques, techniques et économiques relatives à l'e-business.
>> Accès à la rubrique "Développement"

Comparez les prix Matériel, PDA, modems...
Les bonnes affaires de la high-tech avec Kelkoo.
>> Comparateur