Trucsweb.com

Trucsweb.com

CSS

RDFFav

Feuille de styles CSS alternatives

Créer vos différentes feuilles de styles CSS alternatives et utiliser le Javascript pour passer de l’une à l’autre. alternateFeuille de styles CSS alternatives

The Beatles Super pop (Auteur : Andy Warhol)

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.


Mnémonique libre!

Porter une attention particulière aux noms des propriétés. Manipulé en Javascript, le nom de ces propriétés ne sont pas toujours l’équivalent CSS. En effet, certains attributs ne s’écrivent pas de la même manière, en éliminant le tiret (signe de la soustraction en Javascript) par exemple!

Ainsi z-index devient en Javascript zIndex (n’oubliez pas que tant le CSS que le Javascript est sensible à la case, aux majuscules en bon français!).

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

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

Voir la liste complète HTML DOM Style Object.

Cet aberration nous rappelle à quel point il est important de se concerter certes, mais surtout d’éviter le tiret très rependu en français. Même chose avec le simple guillemet trop souvent confondu avec l’apostrophe. J’ai déjà avisé à L’Académie française qui utilise au moins trois types d’apostrophes sur son site Web! Sans réponse il va sans dire!

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
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 9517 - Pages vues : 9650
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @