CSS

Feuille de styles CSS alternatives

Changer le style et les attributs d’un élément a l’aide du Javascript n’a rien d’exceptionnel. Les styles (CSS) partages les mêmes fonctionnalités que les éléments HTML du DOM (document object model). La syntaxe est simple :

document.getElementById([id]).style.[propriété] = [nouveau style];

L’exemple suivant change la couleur du texte de l’élément <p> (paragraphe). Notez le double guillemet autour de la valeur. Bien que le CSS n’utilise pas de guillemets, ça reste du texte que le Javascript doit identifié à l’aide des guillemets.

<p id="oPara">Mon texte!</p>

<script>
document.getElementById("oPara").style.color = "blue";
</script>

Exemple

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ainsi en CSS
#oObjet {z-index : 1}

Se traduit en Javascript par
document.getElementById("oObjet").style.zIndex = "1";

Feuilles de styles alternatives

Créer vos différentes feuilles de styles CSS alternatives et utiliser le Javascript pour passer de l’une à l’autre. Par défaut le navigateur chargera la feuille de styles par défaut (thème 1) et ignora les feuilles de styles « alternatives ». L’important est de donner un titre à chaque feuille de styles permettant ainsi de les distinguer entre elles.

<link rel="stylesheet" type="text/css" title="Thème 1" href="theme1.css" />
<link rel="alternate stylesheet" type="text/css" title="Thème 2" href="theme2.css"/>
<link rel="alternate stylesheet" type="text/css" title="Thème 3" href="theme3.css"/>
<link rel="alternate stylesheet" type="text/css" title="Thème 4" href="theme4.css"/>

Manipulation Javascript

Il suffit d’utiliser un petit Javascript pour substituer les versions alternatives à la version par défaut. C’est-à-dire disabled = true. Pour ce faire, passer au travers le « document object model (DOM) » pour récupérer la feuille de styles par défaut ainsi que les feuilles de styles alternatives via les éléments « link ». Une fois récupérer, il faut changer l’attribut disabled à vrais (true) pour les désactiver sauf pour la nouvelle feuille sélectionnée. Dans ce cas l’attribut disabled doit être à faux (false).

// Appel de la fonction pour passer au thème 2.
twChangeStyle("Thème 2");

function twChangeStyle(sTitre) {
  var i, a;
  // Boucle tout les élément « link » du document. 
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    // Si l’élément est à un attribut « rel » et qu’il contient un titre.
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      // Désactive la feuille de style
      a.disabled = true;
      // Active la feuille de style avec le bon titre.
      if(a.getAttribute("title") == sTitre) a.disabled = false;
    }
  }
}

Récupérer le titre de la feuille de styles active

window.onunload = function(e) {
  var sTitre = twStyleActif();
  // Garder le style actif, 
  // dans un fichier témoin (Cookie) par exemple...
}

function twStyleActif() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

Récupérer la feuille de styles par défaut

Dans cet exemple on s’assure seulement que la feuille de styles ne comprend pas le mot « alt » (pour « alternate ») et ainsi retourner le titre de la feuille de styles par défaut.

function twStyleDefaut() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

Tester le navigateur

La vielle méthode de substituer le bon fichier CSS selon la type de navigateur, essentiellement Netscape (Firefox) ou Internet explorer, fonctionne toujours.

var sNavigateur = navigator.appName;
if (sNavigateur == "Microsoft Internet Explorer") {
  document.write("<link href=\"/style/style_ie.css\" rel=\"stylesheet\" type=\"text/css\" />");}
else if (sNavigateur == "Netscape") {
  document.write("<link href=\"/style/style.css\" rel=\"stylesheet\" type=\"text/css\" />");}	
else {
  document.write("<link href=\"/style/style.css\" rel=\"stylesheet\" type=\"text/css\" />");}

Références

• HTML DOM Style Object