我第一次看到樣式表切換器是在A List Apart或者Simple Bits，那是兩個設計師最應該去的網站。

從那以后，我找到了很多可以讓訪客通過鼠標點擊某個地方切換樣式表的方法。但最近我要寫一篇如何 使用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

轉載于:https://www.cnblogs.com/top5/archive/2009/11/01/1593984.html

總結

以上是生活随笔為你收集整理的JQuery 网站换肤功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。