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

2024-09-06 12:43:21

字體：大中小

供稿：網(wǎng)友

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

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

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

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

代碼如下:
$('link[@rel*=style]').each(function(i)

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

代碼如下:
this.disabled = true;

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

代碼如下:
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);

上一篇：javascript編程起步（第七課）

下一篇：select選擇事件問題