编程 Javascript

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 常用方法总结

Jun 03 Javascript

jQuery的css() 方法使用指南

May 03 Javascript

JavaScript中字符串与Unicode编码互相转换的实现方法

Dec 18 Javascript

Node.js中JavaScript操作MySQL的常用方法整理

Mar 01 Javascript

深入浅析Bootstrap列表组组件

May 03 Javascript

更靠谱的H5横竖屏检测方法（js代码）

Sep 13 Javascript

JS中关于事件处理函数名后面是否带括号的问题

Nov 16 Javascript

基于Vue如何封装分页组件

Dec 16 Javascript

jquery.validate表单验证插件使用详解

Jun 21 jQuery

Angular指令之restict匹配模式的详解

Jul 27 Javascript

vue进入页面时滚动条始终在底部代码实例

Mar 26 Javascript

vue项目支付功能代码详解

Feb 18 Vue.js

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