Javascript pour changer de style

Résolu/Fermé
Profil bloqué - 17 déc. 2010 à 12:31
 Profil bloqué - 19 déc. 2010 à 02:40
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

A voir également:

6 réponses

Bonjour,

Il faut que tu apelle ta fonction par une balise dans le html
<a href="" OnClick="changestyle(style.css)">Lien</a>
1
Profil bloqué
17 déc. 2010 à 12:48
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.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
17 déc. 2010 à 13:12
Le script
function changeStyle(style) {
     document.getElementById('mySheet').href = style+'.css';
}

est a mettre entre les balises:
<script type="text/javascript">
</script>

qui elles même sont dans les balises <head></head>.

Tel que c'est là actuellement, au moindre changement de page, le premier design reviens.
Il faudrait peut-être plutôt faire ça avec une variable de session ou un cookie...
0
Profil bloqué
17 déc. 2010 à 13:14
Oui j'y pensais justement, mais comme annoncé dans mon premier message, je ne connais rien ni en javascript ni en php... Le Php, je l'aurais appris, si mon hébergeur l'acceptait, le javascript, je n'ai pas envie de l'apprendre s'il me sert juste à changer mon design...
0
Merci de ta réponse arthezius, pourrais-tu m'informer de ta solution pour que le premier design ne revienne que si demandé ?
0
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 ?
0
Profil bloqué
17 déc. 2010 à 22:06
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.
0
apprends le javascript si tu veut l'utiliser, ici c'est un forum d'entraide pas du travail gratuit.
Avec le temps passé à discuter sur ce forum et en recherche de script tout fait que vous ne savez utiliser vous auriez déjà pu faire un tutorial de débutant en javascript (ce qui ets largement suffisant pour ce que vous voulez faire) et vous comprendrez la réponse de pivot85150 .
0
Profil bloqué
18 déc. 2010 à 11:57
Merci de ta réponse, mais je ne juge pas qu'apprendre le javascript soit réellement nécessaire quand on voit ce que je veux en faire... Je préfèrerais apprendre le php, qui ma foie, me paraît être plus compliqué certe, mais plus efficace et puissant... Hors, mon hébergeur n'accepte pas le php, raison pour la quelle je tente de trouver un script tout fait qui me permettrais de changer le Css selon la préférence du visiteur...

J'ai tout de même trouvé un code sur un tuto, qui me permet donc de changer mon style, voisi le liens : https://www.jkconception.com/

Cependant, j'ai encore un petit problème, dans le tutoriel, il est précisé qu'à chaque changement de page, le style choisi serait conservé... Mais, j'ai du faire quelque chose de mal ou je sais quoi... Je vous laisse constater le résultat par vous même :
http://th3tagg3r.pagesperso-orange.fr/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Zero_hp Messages postés 131 Date d'inscription lundi 13 décembre 2010 Statut Membre Dernière intervention 29 janvier 2011 17
18 déc. 2010 à 14:11
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 ^^
0
Profil bloqué
19 déc. 2010 à 02:40
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.
0