JS如果实现3个以上风格CSS切换?
我用在网上找到风格切换的代码,里面只默认切换3个风格样式想要多加几个切换的样式,直接在页面上加好像行不通应该如果修改JS文件呢?JS代码如下:functiongetCoo...
我用在网上找到风格切换的代码,里面只默认切换3个风格样式
想要多加几个切换的样式,直接在页面上加好像行不通
应该如果修改JS文件呢?
JS代码如下:
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)
风格是链接的:
<link href="green.css" rel="alternate stylesheet" type="text/css" title="green" />
切换风格那里的代码:
<a title="绿色风格" href="javascript:chooseStyle('green')"><img src="images/green.gif" /></a>
风格链接的没错,问题是我链接了4个风格,页面上只能切换2个
<link href="blue.css" rel="alternate stylesheet" type="text/css" title="blue" media="screen" />
<link href="green.css" rel="alternate stylesheet" type="text/css" title="green" media="screen" />
<link href="yellow.css" rel="alternate stylesheet" type="text/css" title="yellow" media="screen" />
<link href="white.css" rel="alternate stylesheet" type="text/css" title="white" media="screen" /> 展开
想要多加几个切换的样式,直接在页面上加好像行不通
应该如果修改JS文件呢?
JS代码如下:
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)
风格是链接的:
<link href="green.css" rel="alternate stylesheet" type="text/css" title="green" />
切换风格那里的代码:
<a title="绿色风格" href="javascript:chooseStyle('green')"><img src="images/green.gif" /></a>
风格链接的没错,问题是我链接了4个风格,页面上只能切换2个
<link href="blue.css" rel="alternate stylesheet" type="text/css" title="blue" media="screen" />
<link href="green.css" rel="alternate stylesheet" type="text/css" title="green" media="screen" />
<link href="yellow.css" rel="alternate stylesheet" type="text/css" title="yellow" media="screen" />
<link href="white.css" rel="alternate stylesheet" type="text/css" title="white" media="screen" /> 展开
2个回答
展开全部
<script>
function changeStyle(name){
css=document.getElementById("cssfile");
css.href=name+".css";
}
</script>
<div id="nav">
<input images="nav1" type="button" onclick="changeStyle('blue');" value="蓝色样式"/>
<input type="button" value="红色样式" onclick="changeStyle('red')"; /> </div>
必须样式都在同一路径.. 可以点击按钮 随便换
function changeStyle(name){
css=document.getElementById("cssfile");
css.href=name+".css";
}
</script>
<div id="nav">
<input images="nav1" type="button" onclick="changeStyle('blue');" value="蓝色样式"/>
<input type="button" value="红色样式" onclick="changeStyle('red')"; /> </div>
必须样式都在同一路径.. 可以点击按钮 随便换
展开全部
老大应该是风格代码定义好的吧
风格是链接的:
<link href="green.css" rel="alternate stylesheet" type="text/css" title="green" />要有预先定义好的你要的效果代码才可以
也就是如果你要红色的要有:
<link href="red.css" rel="alternate stylesheet" type="text/css" title="red" />
red.css文件要预先定义好!
风格是链接的:
<link href="green.css" rel="alternate stylesheet" type="text/css" title="green" />要有预先定义好的你要的效果代码才可以
也就是如果你要红色的要有:
<link href="red.css" rel="alternate stylesheet" type="text/css" title="red" />
red.css文件要预先定义好!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询