Javascript pour changer de style Résolu/Fermé

Question

Bonjour,

Je voudrais que mes visiteurs puisse changer le style CSS de ma page en un simple clic dans une rubrique "Design".

Une réponse m'a été donnée sur le forum. La voici :

Au lieu de :

<link rel="stylesheet" type="text/css" href="styles.css" />


Mets :

<link rel="stylesheet" type="text/css" id="mySheet" href="styles.css" />


Et ensuite, fais-toi une fonction JS :

function changeStyle(style) {
     document.getElementById('mySheet').href = style+'.css';
}


Et tu appelles changeStyle() sur un onchange ou un autre déclencheur de ton choix.

Seulement, je ne connais pas le Javascript et je ne compte pas l'apprendre étant donné que j'en aurais besoin ici uniquement pour changer de feuille de style...

Je vous demande donc : Comment appeler du javascript ? Dois-je mettre ce code de Js dans un fichier à part ? Je voudrais que vous m'expliquiez comment faire afin que cela soit le plus propre possible.

Merci à tous pour votre aide
Cordialement,
Th3 Tagg3r

pivot85150 · Answer

Bonjour, Il faut que tu apelle ta fonction par une balise dans le html Lien

Th3tagg3r · Answer

Pour ça c'est Ok, mais le reste ? Je la met où ma fonction ? Dans un fichier à part ?
Puis, je ne comprend pas comment cette fonction peut changer ma feuille de style, pouvez vous m'expliquer, et me donner l'exemple dans lequel j'aurais 2 feuilles de style : "red.css" et "green.css" ?

Merci, pour cette réponse.

Th3tagg3r · Answer

Up ! 

Avez vous un exemple avec 2 feuilles de style s'il vous plait ? 
Ou voulez vous mon code xhtml afin de me corriger ce qui ne va pas avec mon javascript ?

Th3tagg3r · Answer

Après une recherche, j'ai trouvé ce code (tout près) : 


function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  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;
}

function getPreferredStyleSheet() {
  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;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);


Mais voila, je pense qu'il est fait pour plus que deux styles, hors, pour le moment, je n'en ai que deux... 

Avec ce code, pouvez vous m'aider à réaliser mon projet avec mes 2 feuilles de styles sachant que l'une est "gray.css" (celle qui doit être affichée par défaut) et l'autre "vert.css" ?

Merci à tous.

Zero_hp · Answer

Bonjour,

Je suis d'accord avec excel, tu dis que tu n'a pas d'utiliser à apprendre le javascript alors que là, tu en a justement besoin ! Ce langage est plus que jamais utilisé pour le web et si tu commence à utilisé des effets et interactions dynamiques dans tes sites tu n'a d'autre solution que d'apprendre le JS.

De plus sur ce topique tu as largement de quoi réaliser ton script. Et si tu veux apprendre le php par la suite, faire un peu de JS ne te ferais pas de mal ^^

Th3tagg3r · Answer

D'accord, si vous vous mettez à plusieurs contre mon avis, je m'avoue vaincu, je vais donc l'apprendre... Mais il ne me paraît peu intuitif, sachant que je connais un autre language de script, le python... Il y a peu de ressemblance... (Oui, j'ai tout de même essayé de comprendre le code que j'ai trouvé ^^")

Je met en résolu, après avoir étudié ce language, je reviens vous voir si je n'ai toujours pas trouvé de solution à mon problème.
Merci.

Javascript pour changer de style

6 réponses

Discussions similaires