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


Posted in Javascript onDecember 24, 2007

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

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>styleswitcher三水点靠木-3water.com </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; }
Javascript 相关文章推荐
密码框显示提示文字jquery示例
Aug 29 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 #Javascript
两个DIV等高的JS的实现代码
Dec 23 #Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 #Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 #Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 #Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 #Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 #Javascript
You might like
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
详解Python核心对象类型字符串
2018/02/11 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
浅析Python 条件控制语句
2020/07/15 Python
python利用opencv保存、播放视频
2020/11/02 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
企业理念标语
2014/06/09 职场文书
股东授权委托书
2014/10/15 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2015年财务部工作总结
2015/04/10 职场文书
社区结对共建协议书
2016/03/23 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS