DEVENIR-WEBMASTER.COM Log In
 22
open

Modifier les styles en Javascript

# Trois façons différentes de procéder open

Pour changer le style d'un élément HTML il y a trois façons de procéder :

  1. La première est de passer par l'attribut style de l'élément HTML que l'on souhaite modifier. Dans ce cas on utilise le DOM HTML de la même manière qu'on l'utilise pour tout attribut d'un élément HTML. De plus avec cette façon de procéder on est sûr d'arriver à modifier le style car c'est une méthode qui est très spécifique au sens de la cascade CSS (Si vous ne voyez pas ce que je veux dire revoyez le tuto qui traite de la cascade CSS).
  2. La deuxième c'est de passer par une modification de la feuille de style. Pour cela il faudra utiliser la partie CSS du DOM qui a été ajouté à partir du Level 2 de la spécification. Comme d'habitude je vous mets un lien vers la documentation traduite en français.
  3. La troisième méthode c'est d'écrire à l'avance une classe dans la feuille de style puis d'appliquer cette classe à un élément HTML au moyen de Javascript. Encore faut-il pouvoir le faire car cela suppose que le programmeur connaît son besoin à l'avance.

# Modifier avec l'attribut style du HTML open

On commence ici par la première méthode c'est à dire celle qui consiste à modifier l'attribut style d'un élément HTML.

Tester le code

Dans ce cas vous avec juste besoin de savoir comment retrouver le nom de la propriété CSS que vous voulez affecter. Ici il s'agit de la propriété CSS color et logiquement on retrouve le même nom en Javascript.

Vous auriez pu avoir besoin de mettre une bordure et vouloir utiliser les propriétés CSS border-color , border-width et border-style. Dans ce cas pour retrouver le nom de la propriété CSS en Javascript il suffit de coller le deuxième mot en lui mettant une majuscule ce qui donne borderColor, borderWidth et borderStyle.

Tester le code