JS版网站风格切换实例代码


Posted in Javascript onOctober 06, 2008

样式表连接,设3种风格,把你要改变的图片背景等写入样式表。

<link media="screen" href="/css/default.css" rel="stylesheet" type="text/css" title="default" /> 
<link media="screen" href="/css/blue.css" rel="alternate stylesheet" type="text/css" title="blue" /> 
<link media="screen" href="/css/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />

第一个是默认样式表。
脚本--作者:dynamicdrive.com
使用协议:http://www.dynamicdrive.com/notice.htm
//Style Sheet Switcher version 1.0 Nov 9th, 2005 
//Author: Dynamic Drive: http://www.dynamicdrive.com 
//Usage terms: http://www.dynamicdrive.com/notice.htm 
function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair 
if (document.cookie.match(re)) //if cookie found 
return document.cookie.match(re)[0].split("=")[1] //return its value 
return null 
} 
function setCookie(name, value, days) { 
var expireDate = new Date() 
//set "expstring" to either future or past date, to set or delete cookie, respectively 
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5) 
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"; 
} 
function deleteCookie(name){ 
setCookie(name, "moot") 
} 
function setStylesheet(title) { 
var i, cacheobj 
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) { 
if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) { 
cacheobj.disabled = true 
if(cacheobj.getAttribute("title") == title) 
cacheobj.disabled = false //enable chosen style sheet 
} 
} 
} 
function chooseStyle(styletitle, days){ 
if (document.getElementById){ 
setStylesheet(styletitle) 
setCookie("mysheet", styletitle, days) 
} 
} 
var selectedtitle=getCookie("mysheet") 
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored 
setStylesheet(selectedtitle)

调用方法
<a title="默认风格" href="javascript:chooseStyle('default',5)">默认风格</a> 
<a title="橙色风格" href="javascript:chooseStyle('orange',5)">橙色风格</a> 
<a title="蓝色风格" href="javascript:chooseStyle('blue',5)">蓝色风格</a>

注意:title内容改成你样式表的名字,我这里是设定为5天。
Javascript 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 #Javascript
IE与firefox之jquery用法区别
Oct 03 #Javascript
jquery的颜色选择插件实例代码
Oct 02 #Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 #Javascript
JavaScript下申明对象的几种方法小结
Oct 02 #Javascript
初学JavaScript第二章
Sep 30 #Javascript
select组合框option的捕捉实例代码
Sep 30 #Javascript
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python3获取当前文件的上一级目录实例
2018/04/26 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python实现QQ批量登录功能
2019/06/19 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
pandas针对excel处理的实现
2021/01/15 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
党员自我评价分享
2013/12/13 职场文书
2015年药店工作总结
2015/04/20 职场文书
圣诞晚会主持词
2015/07/01 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书