首页 > 网络编程 > JavaScript > javascript技巧 > 用cookies实现的可记忆的样式切换效果代码下载

用cookies实现的可记忆的样式切换效果代码下载

2007-12-24 14:44:09 作者：

比较不错的用cookies实现的可记忆的样式切换效果，这个思路也在一定程序，方便客户的长期使用。

无刷新cookies切换样式示例代码实例主要用到的代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>styleswitcher脚本之家-www.jb51.net </title> 
<link title=red rel="stylesheet" type="text/css" href="red.css"> 
<LINK title=blue href="blue.css" type=text/css rel="alternate stylesheet"> 
<SCRIPT src="styleswitcher.js" type=text/javascript></SCRIPT> 
<style> 
<!-- 
#wrapper     { font-size: 10px;width:100px; } 
#left     { width:20px; height:100px; } 
#right     { width:80px;float:right;background-color:#000000;;height:100px;color:#FFFFFF } 
--> 
</style> 
</head> 

<body> 
<A onclick="setActiveStyleSheet('red');return false;" href="#">red</A> 
<A onclick="setActiveStyleSheet('blue');return false;" href="#">blue</A> 
<select name="changestyle" size="1"> 
<option value="red">red</option> 
<option value="blue">blue</option> 
</select><input type="button" value="变" onclick="setActiveStyleSheet(changestyle.value);return false;"> 
<div id="wrapper"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
</body> 

</html> 

styleswitcher.js

复制代码代码如下:

// styleswitcher.js 

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

red.css

复制代码代码如下:

#left { background-color:#0000FF; float:right;}

red.css

复制代码代码如下:

#left { background-color:#FF0000;float:left; }