Modifier les styles CSS
Une fois que l'on a repéré un élément on peut agir sur celui-ci avec toutes les méthodes et propriétés qui sont à disposition. Voir la doc de Element
On peut donc modifier les styles CSS de celui-ci.
Ceci par deux moyens principaux:
La propriété className
Cette propriété permet d'agir sur l'attribut class d'un élément. Pour rappel, cet attribut permet d'associer des styles défini dans des feuilles de style aux éléments. Pour autant qu'il y aie un sélecteur qui corresponde. On peut associer plusieurs classes CSS à un élément en les séparant par un espace.
e.className = 'gros';
Ce code fixe l'attribut class à gros pour l'élément dont l'id est logo
Si l'élément en question disposait déjà d'un attribut class, celui-ci est remplacé. C'est pourquoi certains frameworks proposent des fonctions plus évoluées qui permettent d'ajouter ou de retirer un réglage à l'attribut class (en gérant les espaces entre les noms de classes des qu'il y a plus d'un réglage).
La propriété style
La propriété style permet d'accéder finement aux styles qui concernent un élément particulier, de façon similaire à l'attribut style dans une balise.
e.style.color = 'red';
e.style.backgroundColor = 'yellow';
e.style.fontSize = '12px';
L'usage de la propriété style est simple à deux exception près:
1) Les propriété CSS qui sont faites de mots composés, tel que background-color ne peuvent s'écrire ainsi en javascript, c'est pourquoi il faut supprimer le tiret (signe moins) et mettre en majuscule la lettre qui le suit, par exemple: backgroundColor.
2) Certains noms de styles sont en conflit avec des mots réservés du langage javascript, par exemple float dans ce cas de figure il faudra utiliser le nom styleFloat pour IE et cssFloat pour les autres navigateurs. Cette différence entre navigateurs est peu pratique à gérer. Il est souvent plus simple d'utiliser la propriété className et de régler le float dans la classe correspondante.
Editer