La classe CSS d'un élément peut-elle être définie via JavaScript?

Question

Je veux faire:

e.className = t; 

Où t est le nom d'un style que je l'ai défini dans une feuille de style.

Answer 1

Si e est une référence à un élément DOM et vous avez une classe comme ceci: .t {color:green;} alors vous voulez faire référence au nom de la classe comme une chaîne:

e.className = 't'; 

Answer 2

Oui, cela fonctionne (avec le nom de la classe comme une chaîne, comme jonah mentionné). En outre, vous pouvez définir les attributs de style directement sur un objet à l'aide de l'interface DOM Level 2 Style. par exemple,

button.style.fontFamily = "Verdana, Arial, sans-serif"; 

où button est (probablement) un objet bouton. :-)

Answer 3

Non seulement cela fonctionne, mais il est même une bonne pratique.

Vous souhaitez définitivement séparer le format de données (xHTML) de la conception (CSS) et du comportement (javascript).

Il est donc préférable de simplement ajouter et supprimer des classes dans JS en fonction de l'événement, alors que les préoccupations esthétiques sont déléguées aux styles CSS. E.G: Coloration d'un message d'erreur en rouge.

CSS

.error 
{ 
    color: red; 
} 

JS

var error=document.getElementById('error'); 
error.className='error'; 

N.B.:

• Cet extrait est juste un exemple. Dans la vraie vie, vous utiliseriez js juste pour ça.
• document.getElementById n'est pas toujours interopérable. Mieux vaut utiliser un framework JS pour gérer cela. Personnellement, j'utilise JQuery.