Test af alternativ css

Styleskift via javascript

Siden er opdateret 8. 12. 2011

Denne side demonstrerer, hvordan man med et java-script og en håndfuld links kan ændre en sides design.

Først skal der i sidens head indsætter referencer til de ønskede css-filer:

<link href="main.css" rel="stylesheet" type="text/css" title="Standard" />
<link href="ds2.css" rel="stylesheet2" type="text/css" title="Design2" />
<link href="ds3.css" rel="stylesheet3" type="text/css" title="Design3" />

Derefter skal der - også i sidens head - indsættes en kode til indlæsning af det javascript, der skifter den anvendte css ud med den ønskede nye:

<script type="text/javascript" src="style.js"></script>

Javascriptet er lagt eksternt, så det kan genbruges på mange sider. I forbindelse med, at scriptet sætter en cookie, som husker det valgte design, vil nye indlæste sider med samme funktion indbygget have samme valgte design.

Filen style.js, der indholder javascriptet, ser sådan ud:

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("dagbogsstyle");
 var title = cookie ? cookie : getPreferredStyleSheet();
 setActiveStyleSheet(title);
}

window.onunload = function(e) {
 var title = getActiveStyleSheet();
 createCookie("dagbogsstyle", title, 365);
}

var cookie = readCookie("dagbogsstyle");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Nu mangler du bare at lave en håndfuld links den samme side, men med forskellige styles indlæst:

<a href="#" onclick="setActiveStyleSheet('Design2'); return false;">Alternativt design 2</a>

I parentesen i kodeboksen her over indsætter du titlen på det ønskede css-ark. Samtidig skriver du den ønskede linktekst inden linkets sluttag.

---

Se den side, hvor skiftet er lavet med asp-kode.

Se den side, hvor skiftet er lavet med php-kode.

Se den side, som kun virker i Firefox, Mozilla, Netscape og Opera.

Bemærk, at de to teknikker (serverside-styret css-skift og css-skift via en browserfunktion) ikke er glade for at arbejde sammen.

april 2006

FreeFind