從那以後，我找到了很多可以讓訪客通過鼠標點擊某個地方切換樣式表的方法。但最近我要寫一篇如何 使用jQuery編寫簡單代碼實現它的教程。
我將向你們逐步解說整個的過程，不僅僅因為要展示jQuery代碼的簡介，同時也要揭示jQuery庫中的若干高級特性。
首先，代碼
代碼如下:
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
其他這裡沒有提到的部分是你將在後面看到的創建和讀取cookie的函數。
熟悉的開篇
$(document).ready(function(){ $('.styleswitch').click(function()……告訴jQuery“以最快的速度查找所有包含對象名‘styleswitch'的元素，並在他們被鼠標點擊時執行一個函數”。
看起來不錯。當鼠標點擊預先指定的元素時，switchStylestyle函數將被調用。從現在開始是重點。
這句話什麼意思？
第一次看到這句代碼的時候我的腦子有些卡殼：
$('link[@rel*=style]').each(function(i) {
在互聯網上搜索了一下後我空手而歸。最後不得不找到了jQuery的作者John Resig，向他咨詢。
他直接給了我一個jQuery網站的頁面地址，裡面講解了若干jQuery提供的高級特性(xpath)，可以用來查找並操作頁面中的若干元素。
如果你看過這些東西你就能明白上面那句神秘的代碼的含義是告訴jQuery“查找所有帶rel屬性並且屬性值字符串中包含‘style'的link鏈接元素”。
讓我們看看如何編寫包含一個主樣式表，兩個備用樣式表的頁面：
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /><link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /><link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />我們可以看到所有樣式表都含有一個包含‘style'字串的rel屬性。
所以結果一目了然，jQuery輕松定位了頁面中的樣式表鏈接。
下一步？
each()函數將遍歷所有這些樣式表鏈接，並執行下一行中的代碼：
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;“首先禁用所有的樣式表鏈接，然後開啟任何title屬性值與switchStylestyle函數傳遞過來的字串相同的樣式表”
一把抓啊，不過很有效。
現在我們需要保證的是那些樣式表存在並且有效。
完整代碼和演示
既然 Kelvin Luck已經編寫了這些代碼，我就不在這裡重復了。
DEMO
我相信Kelvin的靈感是從 這個網站那裡得到的，我們正好可以看看使用其他工具實現這個功能是否要比jQuery更加復雜冗長。
完整的styleswitch.js
代碼如下:
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
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 var 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;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie functions