Modifier les classes d’un élément HTML

document.getElementById("monElement").className = "maClasse";

// Ou plusieurs classes, séparée par un espace.
document.getElementById("monElement").className = "maClasse1 maClasse2";

Pour ajouter de nouvelles classes, sans supprimer celles déjà existantes :
document.getElementById("monElement").className += "maClasse3";

Un nouvel objet HTML5 permet maintenant de gérer une liste de classes en quelques méthodes. Ce qui révolutionne aussi la plupart des problèmes booléens en CSS que jQuery réglait historiquement. On retrouve d’ailleurs partout la technique du « bouton radio » pour jouer avec le « vrais et faux » ou la permutation booléenne (toogle).
Voir l’excellent tutoriel du Docteur HTML5 HTML5 Doctor - The classList API.

Voilà la liste des méthodes disponibles :

add()   pour ajouter une classe à la liste remove()   pour supprimer une classe de la liste contains()   pour vérifier si une classe fait partie de la liste toggle()   pour permuter une classe dans une liste item()   pour retourner une classe à une position spécifique dans une liste toString()   pour convertir la liste en une chaîne de caractères length   pour retourner le nombre de classe d’une liste value   pour ajouter une propriété ou une méthode perso à l’objet « classList »

On peut accéder aux attributs id et class d'un élément donné à l'aide des propriétés id et className.
Il est donc possible de modifier l'affichage d'un élément 
en changeant son identifiant ou bien sa classe, en rapport avec une feuille de style CSS.





elt.classList.remove('machin'); retire la classe machin si elle était appliquée à l'élément ;



elt.classList.add('truc'); ajoute la classe truc à l'élément ;



elt.classList.toggle('bidule'); retire la classe bidule si elle était appliquée à l'élément, et l'ajoute si elle n'était pas présente ;



elt.classList.contains('chose'); renvoie un booléen permettant de savoir si la classe chose est appliquée à l'élément.
on peut faire appel à la méthode setAttribute(). Par exemple, elt.setAttribute("align", "center") permet de modifier l'attribut align de l'élément

Source Gilles Chagnon

<style>
#div1{background-color:#00ff00;width:300px;}
</style>


<input type="button" value="Changer la couleur de fond en vert"
onclick="javascript: document.getElementById(‘div1′).style.backgroundColor=’#00ff00’;" />

<input type="button" value="Augmenter la largeur"
onclick="javascript:document.getElementById(‘div1’).style.width=
(parseInt(document.getElementById(‘div1′).clientWidth)+25)+’px’;" />
Diminuer la largeur
(parseInt(document.getElementById(‘div1′).clientWidth)-25)+’px’;" />

<input type="button" value="Augmenter la hauteur" onclick="javascript:document.getElementById(‘div1’).style.height=
parseInt(document.getElementById(‘div1′).clientHeight)+25)+’px’; />  diminuer : -25)+'px';

il n’est pas possible de modifier le style CSS font-size 
si celui-ci est appliqué au niveau de la classe div1 de l’élément HTML.
On est alors obligé d’appliquer le style font-size directement sur l’élément HTML lui-même via l’attribut style.
une autre solution consiste à appliquer une autre classe à l’élément HTML

<input type="button" value="Appliquer la class CSS ‘divA’"
onclick="javascript:document.getElementById(‘divA’).className=’divA’;" />
<br />
<input type="button" value="Appliquer la class CSS ‘divB’"
onclick="javascript:
document.getElementById(‘divA’).className=’divB’;" />



Ce script parcourt toutes les balises <p> de la page et si le contenu de chaque balise commence par "$ ",
 une balise <span> est automatiquement ajoutée avec une classe "code"
<script language=javascript type="text/javascript">
function addCode() {
  var parag = document.getElementsByTagName('p');
  var myRegex = /^$ /;
  for (var i=0, c=parag.length; i<c; i++)  {
    if(myRegex.test(parag[i].innerHTML)) {
       parag[i].innerHTML = '<span class="code">' 
        (parag[i].innerHTML)+'</span>';
    }
  }
}
</script>