js: style wechseln

S

sh1t0R

Aktives Mitglied
ich habe ueberlegt wie ich das stylesheet mit js wechseln kann.
hab ich herausgefunden und kam zu diesem code:
CODE <script>
function chstyle(a)
{
document.getElementsByTagName("link")[0].href='styles/style'+a+'.css';
}
</script>



CODE <a id="red" href="javascript:void(chstyle(2))">R</a>
<a id="blue"href="javascript:void(chstyle(1))">B</a>


das funktioniert prima (ich habe beide stylesheets im entspr. ordner,)
aber wenn ich (standard ist blau) auf rot klicke, wechselt es autom. auf rot aber wenn ich dann navigiere z.b. von home zu contact wechselt der style wieder zum standard.
ich moechte es aber so beibehalten wie der user es angewaehlt hat.
 
Ich sehe 2 mögliche Lösungen für deinen Wunsch.

Ersten kannst Du die Wahl deiner User in ein Cookie schreiben und zweitens könntest das Style einfach in einen Parameter in die Url packen, der immer wieder übergeben wird.
 
da ich js nicht wirklich beherrsche, koenntest du mir bitte erlaeutern wie das genau funktiniert?
mit code, ich waere dankbar
biggrin.gif
 
Ich würde nicht das stylesheet wechseln sonder die Klasse. ansonsten hast du 2 dokumente die du aktualisieren muss.

hab mich schnell ein paar minuten hingesetzt und das folgende geschreiben.. hat sicherlich verbesserungspotential, aber für eine ungefähre richtungsweisung sollte es genügen.


Gruss

Spaceman007


CODE

<html>
<style>
.style1
{
color:red;
}

.style2
{
color:green;
}
</style>

<script>

function changeStyle( newStyle )
{
changeClass( newStyle )
 
}//changeStyle

function changeClass( newClass )
{
var allLinksObj = document.getElementsByTagName( "a" )
var nrOfElements = allLinksObj.length;

for(i=0; i<nrOfElements; i++)
{
 allLinksObj[i].className = newClass;
}

setCookie( "classname="+newClass )

}//changeClass


function setCookie(CookieValue){
 var TimeNow = new Date();
 var TTL = 1000*60*60*24*7;
 var CookieExpires = new Date(TimeNow.getTime() +TTL )

 document.cookie = "Schrift=" + CookieValue +";expires=" + CookieExpires.toGMTString() + ";";
}//setCookie

function getCookie(name) {
 var cname = name +  "=";
 var dc = document.cookie;

 if (dc.length > 0) {
   begin = dc.indexOf(cname);
   if (begin != 1) {
     begin += cname.length;
     end = dc.indexOf(";", begin);
     if  (end== -1) end = dc.length;
     return unescape(dc.substring(begin, end));
   }
 }
 return null;
}//getCookie

function init()
{
var className = getCookie("classname")
changeClass( className )
}
</script>
<body onLoad="init();">
<a href="javascript:changeStyle('style1');">change to red</a><br>
<a href="javascript:changeStyle('style2');">change to green</a><br>
<br><br><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>

</body>

</html>

 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben