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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 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
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python发送邮件实例分享
2017/07/28 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python Socket使用实例
2017/12/18 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
如何使用repr调试python程序
2020/02/28 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
编辑个人求职信范文
2013/09/21 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
大学班级文化建设方案
2014/05/06 职场文书
本科生就业推荐信
2014/05/19 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
讲文明倡议书
2015/04/29 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
导游词之西安骊山
2019/12/20 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis