用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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
js字符串操作方法实例分析
May 06 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
vue实现跨域的方法分析
May 21 Javascript
ant design实现圈选功能
Dec 17 Javascript
原生js+ajax分页组件
Jan 30 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
php 获取全局变量的代码
2011/04/21 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php实现将Session写入数据库
2015/07/26 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python访问sqlserver示例
2014/02/10 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Pycharm中如何关掉python console
2020/10/27 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
艺术设计专业求职自荐信
2014/05/19 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
2019秋季运动会口号
2019/06/25 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Android 中的类文件和类加载器详情
2022/06/05 Java/Android