页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容用cookies实现的可记忆的样式切换效果代码下载

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

发布：dxy 字体：[增加减小] 类型：转载

比较不错的用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

[复制此代码]CODE:

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