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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
基于vue、react实现倒计时效果
Aug 26 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
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
php json转换相关知识(小结)
2018/12/21 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
javascript每日必学之多态
2016/02/23 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
使用JS动态显示文本
2017/09/09 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
详解Python3的TFTP文件传输
2018/06/26 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
三维科技面试题
2013/07/27 面试题
打架检讨书50字
2014/01/11 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
知识竞赛主持词
2014/03/26 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
个人先进事迹材料
2014/12/29 职场文书
搬迁通知
2015/04/20 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript