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

基于Bootstrap使用jQuery实现简单可编辑表格
这篇文章主要介绍了基于Bootstrap使用jQuery实现简单可编辑表格的相关资料,需要的朋友可以参考下
2016-05-05
微信小程序实现日历效果
这篇文章主要为大家详细介绍了微信小程序实现日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
JS开发中基本数据类型具体有哪几种
JS的数据类型包括基本数据类型、复杂数据类型和特殊数据类型，今天我们主要先讲解一下基本数据类型。感兴趣的朋友一起看看吧
2017-10-10
javascript修改表格背景色实例代码分享
这篇文章主要介绍了javascript修改表格背景色实例，代码简单，大家参考使用吧
2013-12-12
JS实战面向对象贪吃蛇小游戏示例
大家好，本篇文章主要讲的是JS实战面向对象贪吃蛇小游戏示例，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下哦，方便下次浏览
2021-12-12
javascript 正则表达式相关应介绍
javascript 中几个与正则表达式相关的应用,本文将详细介绍，需要的朋友可以参考下
2012-11-11
JavaScript字符串操作的四个实用技巧
在制作前端页面的过程中,经常需要用到JavaScript进行逻辑处理,很多时候都需要对字符串进行操作,这篇文章主要给大家介绍了关于JavaScript字符串操作的四个实用技巧,需要的朋友可以参考下
2021-07-07
layui下拉框获取下拉值(select)的例子
今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子，具有好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
浅谈JS的原型和继承
这篇文章主要介绍了JS原型和继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
JavaScript动态修改弹出窗口大小的方法
这篇文章主要介绍了JavaScript动态修改弹出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04