快捷導(dǎo)航

動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用

更新時(shí)間：2007年02月20日 00:00:00 投稿：mdxy-dxy

這篇文章主要介紹了動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用

算是翻譯吧，原文：http://15daysofjquery.com/style-sheet-switcheroo/12/

可以應(yīng)用的范圍很廣，尤其是用標(biāo)準(zhǔn)構(gòu)架的網(wǎng)站，比如說pjblog就可以，只要通過簡(jiǎn)單的點(diǎn)擊，就可以讓網(wǎng)站在瞬間換個(gè)皮膚，當(dāng)然可以通過其他方法實(shí)現(xiàn)，這里通過jquery來實(shí)現(xiàn)，優(yōu)點(diǎn)是代碼簡(jiǎn)潔，可讀性強(qiáng)
首先放上代碼

復(fù)制代碼代碼如下:

$(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]’).each(function(i)
        {
                this.disabled = true;
                if (this.getAttribute(’title’) == styleName) this.disabled = false;
        });
        createCookie(’style’, styleName, 365);
}

這里說明一下：

復(fù)制代碼代碼如下:

$(’.styleswitch’).click

這一句是對(duì)所有classname為styleswitch的對(duì)象定義點(diǎn)擊事件，在jquery里用"#"表示id，比如$("#my_id")就可以定位到id為my_id的對(duì)象，定位classname為"."，而定位tagName則不加任何修飾符，比如$("p")，就是定位到所有p對(duì)象

readCookie和createCookie是兩個(gè)自定義函數(shù)，這里沒有給出來

復(fù)制代碼代碼如下:

$(’link[@rel*=style]’).each(function(i)

這句話的意思是定位到link標(biāo)簽，其中有rel屬性，并且rel屬性里要包含style，對(duì)每一個(gè)這樣的對(duì)象制定函數(shù)

復(fù)制代碼代碼如下:

this.disabled = true;

這句話的意思是使當(dāng)前的對(duì)象失效

復(fù)制代碼代碼如下:

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

這個(gè)函數(shù)的作用就是選擇當(dāng)前的樣式
$(’link[@rel*=style][@title]’).each(function(i)
有了前面的知識(shí)，這句話應(yīng)該就不難理解了吧，就是所有標(biāo)簽名為link，包含rel屬性，且rel屬性里要包含style，同時(shí)還要有title屬性的對(duì)象，每一個(gè)都執(zhí)行相應(yīng)的函數(shù)

下面來看看主頁面的內(nèi)容

復(fù)制代碼代碼如下:

 <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" />

這里rel="alternate stylesheet"，使得當(dāng)前的css不會(huì)應(yīng)用到當(dāng)前的文檔，而只是備用

復(fù)制代碼代碼如下:

<li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li> 
<li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li> 
<li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>

這些就是點(diǎn)擊后改變樣式部分的代碼，我們注意到有rel屬性，有class屬性，這些都是方便定位用的示例：http://www.healdream.com/upLoad/html/jquery/styleswitch/