open

Modifier l'attribut style d'un élément HTML en Javascript

#1 Bilan des possibilités open

Pour modifier les styles de notre document voilà l'ensemble de nos possibilités :

Bilan des possibilités pour modifier les styles du document
  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.
  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.

#2 Modifier l'attribut style de l'élément HTML open

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

Tester le code

Dans ce cas vous avez 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