样式表连接,设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+CSS实现Flash动态新闻效果(pp原创)
/* 图片新闻大小可以更改此样式 */
.pp_portal_imgNews {
position:relative;
text-align:left;
width:250px;
height:190px;
}
.pp_portal_imgNew {
position:absolute;
}
/* 图片样式 */
.pp_por>>>详细阅读
本文标题:JS版网站风格切换实例代码
地址:http://www.17bianji.com/kaifa2/JS/29325.html
1/2 1