JS版网站风格切换实例代码_Javascript教程-查字典教程网
JS版网站风格切换实例代码
JS版网站风格切换实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:样式表连接,设3种风格,把你要改变的图片背景等写入样式表。复制代码代码如下:第一个是默认样式表。脚本--作者:dynamicdrive.co...

样式表连接,设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教程学习
    编程开发子分类