DOM et Cascading StyleSheet
A milles lieux des beaux discours, une manière simple et efficace de montrer à quoi sert le CSS, sera de se demander ce que serait ce tutorial sans CSS. Je suis sure qu'avec cette démonstration "parlante" vous ne vous demanderez plus ce à quoi sert le CSS. Ce point étant clarifié, comment accéder au CSS à partir du DOM.
Accéder et modifier le CSS d'un node avec le DOM
Là encore, le DOM facilite la tâche en fournissant une
méthode appelée style qui permet de manipuler la présentation de
n'importe quel node de type balise.
Si vous êtes familiarisé avec l'utilisation du CSS alors il est très simple de faire la transition avec la manière dont le DOM accède au CSS. Exemple :
//en CSS on écrit :
#node {border-bottom: 1px solid #000; }
// l'équivalent en DOM est :
var node = document.getElementById("node");
node.style.borderBottom = "1px solid #000";
//on indique ainsi que la bordure en dessous de node doit
être de 1 pixel avec un style solide et une couleur noir.
De l'exemple ci-dessus on peut déduire que :
- les propriétés de style sont considérés comme étant une suite de caractères.
- les noms des propriétés sont conservés à la différence que les propriétés en CSS composés de mots liés à l'aide d'un trait d'union sont réécrits en un seul bloc en supprimant le trait d'union et en mettant en majuscule la première lettre du mot suivant. (ex: border-bottom -> borderBottom).
Changer la de feuille de style attaché à un document
En utilisant setAttribute, getAttribute et getElementsByTagName, des techniques déjà étudiées dans ce tutorial vous pouvez modifier la feuille de style utilisée pour présenter les données de notre page. D'ailleurs c'est ce que fait le script utilisé au début de ce tutorial pour vous montrer ce à quoi sert le CSS.
REMARQUE: Attention à l'utilisation abusive de mon script car il est basique et possède d'innombrables lacunes...