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

时间:2013-05-21 17:33 来源:互联网 作者:源码搜藏 收藏

样式表连接,设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" 样式表连接,设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技术阅读排行

最新文章