Bằng việc sử dụng một đoạn javascript nhỏ, bạn có thể cho phép người dùng chuyển đổi qua lại giữa các style sheet nhầm thay đổi diện mạo và layout của trang web hiện tại mà không cần phải load lại trang.

<link rel="stylesheet" type="text/css" href="/home/preferred.css" title="swanky" />

Theo mặc định, trang web sẽ load style sheet trên làm style sheet chính cho trang web. Và nó chỉ bị vô hiệu hoá khi có một style sheet thay thế khác được bật lên. Để thêm một style sheet thay thế vào trang web, ta dùng cú pháp như sau:

<link rel="alternate stylesheet" type="text/css" 
         href="alternate.css" title="groovy" />

Bạn có thể thấy là thuộc tính rel đã được đổi thành alternate sytelsheet. Mặc định, alternate stylesheet cũng được load cùng trang web, nhưng không được bật lên (bị vô hiệu hoá). Mỗi trang web có thể có nhiều alternate stylesheet khác nhau.

Để kích hoạt một alternate stylesheet nào đó lên, ta cần một đoạn javascript nhỏ như sau, bạn có thể đặt nó vào một javascript và cho load cùng trang web. Đây là đoạn code được viết bởi Peter-Paul Koch và Sowden, bạn có thể download tại đây.

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);

Sau đó thêm vào trang web link sau để kích hoạt stylesheet mong muốn:

<a href="#" onclick="setActiveStyleSheet('swanky'); return false;">
   change to swanky</a>
<a href="#" onclick="setActiveStyleSheet('groovy'); return false;">
   change style to groovy</a>

Bạn có thể sử dụng cú pháp sau, theo cách mà bạn muốn:

setActiveStyleSheet('title of stylesheet');