tfe Homepage

17/06/2009

Ajouter ou Modifier un style css avec javascript

Rien d'extraordinaire ici, juste une petite astuce visant à  modifier le style d'une page web dynamiquement, sans recharger l'ensemble de la page.

Contexte: une page web ayant au moins un style css du type
<link rel="stylesheet" href="style.css" type="text/css" />

Code pour retirer le style actuel:

var links=document.getElementsByTagName('link');
for (i=0;i<links.length;i++)
{
links[i].parentNode.removeChild(links[i]);
}

Ajouter un style:

var link = document.createElement('link');
link.href='/style.css';
link.type='text/css';link.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);


Suite au commentaire de kapouik, vous pouvez aussi visiter la page d'exemple.