怎么样用JS 去调用 外部文件夹里的 CSS来更换皮肤
是这样的,我有两个文件夹,分别叫1-1和1-2.这两个文件夹里面都有一个CSS文件夹里面放着CSS。也就是说我做了两套的颜色,1-1里面的是蓝色,包括图片和CSS,1-2...
是这样的,我有两个文件夹,分别叫1-1和1-2.这两个文件夹里面都有一个CSS文件夹里面放着CSS。也就是说我做了两套的颜色,1-1里面的是蓝色,包括图片和CSS,1-2里面做的是灰色,包括CSS和图片。然后我的index.html这个文件是放在另一个新建的“1”的文件里面的。现在我在index.html的文件里做了两个图片,一个灰色一个蓝色。点击蓝色,就调用1-1文件里的CSS,整体风格就是蓝色了。然后我点击灰色,就是调用1-2里面的CSS,整体风格就变成了灰色。各位高手们,这个应该怎么做才可以办到啊~~~~~~~!
现在上HTML代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>XX水务有限公司</title>
<link href="../../themes/1-1/css/css.css" rel="stylesheet" type="text/css">
<link href="../../themes/1-2/css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--底部start!-->
<div id="foot">
<div class="top_title_right_admin">
<ul>
<li>您好:</li>
<li><img src="../../themes/1-1/images/ico_1.gif" class="tupian"></li>
<li>管理员</li>
<li class="link_2"><a href="#">退出</a></li>
</ul>
</div>
<!--这里是皮肤切换start!-->
<div id="skin" class="vaiomodeswitch">
<ul>
<li>界面风格</li>
<li title="蓝色" class="blue"><a href="javascript:void(0)" onClick="document.getElementById('a').className='../../themes/1-1/css/css.css'"> </a></li>
<li title="灰色" class="gray"><a href="javascript:void(0)" onClick="document.getElementById('a').className='../../themes/1-2/css/css.css'"> </a></li>
</ul>
</div>
<!--这里是皮肤切换end!-->
<div style='position:absolute;right:20px;top:8px;z-index:100;display:none;'onclick='disnone(this.id,"top_backdrop");' id='down'><a href="#"><img src='../../themes/1-1/images/arrows_down.png' /></a></div>
<div style='position:absolute;right:20px;top:8px;z-index:100;'onclick='disnone(this.id,"top_backdrop");' id='up'><a href="#"><img src='../../themes/1-1/images/arrows_up.png' /></a></div>
</div>
<!--底部end!-->
</body>
</html>
在线等回答,我的邮箱:363236335@qq.com 展开
现在上HTML代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>XX水务有限公司</title>
<link href="../../themes/1-1/css/css.css" rel="stylesheet" type="text/css">
<link href="../../themes/1-2/css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--底部start!-->
<div id="foot">
<div class="top_title_right_admin">
<ul>
<li>您好:</li>
<li><img src="../../themes/1-1/images/ico_1.gif" class="tupian"></li>
<li>管理员</li>
<li class="link_2"><a href="#">退出</a></li>
</ul>
</div>
<!--这里是皮肤切换start!-->
<div id="skin" class="vaiomodeswitch">
<ul>
<li>界面风格</li>
<li title="蓝色" class="blue"><a href="javascript:void(0)" onClick="document.getElementById('a').className='../../themes/1-1/css/css.css'"> </a></li>
<li title="灰色" class="gray"><a href="javascript:void(0)" onClick="document.getElementById('a').className='../../themes/1-2/css/css.css'"> </a></li>
</ul>
</div>
<!--这里是皮肤切换end!-->
<div style='position:absolute;right:20px;top:8px;z-index:100;display:none;'onclick='disnone(this.id,"top_backdrop");' id='down'><a href="#"><img src='../../themes/1-1/images/arrows_down.png' /></a></div>
<div style='position:absolute;right:20px;top:8px;z-index:100;'onclick='disnone(this.id,"top_backdrop");' id='up'><a href="#"><img src='../../themes/1-1/images/arrows_up.png' /></a></div>
</div>
<!--底部end!-->
</body>
</html>
在线等回答,我的邮箱:363236335@qq.com 展开
3个回答
推荐于2016-04-24
展开全部
载入不同css(换皮肤效果)
function SetCookie(name,value){
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(2<argc)?argv[2]:null;
var path=(3<argc)?argv[3]:null;
var domain=(4<argc)?argv[4]:null;
var secure=(5<argc)?argv[5]:false;
document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
}
function GetCookie(Name) {
var search = Name + "=";
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end));
}
}
return returnvalue;
}
var thisskin;
thisskin=GetCookie("nowskin");
if(thisskin!="")
skin.href=thisskin;
else
skin.href="style2.css";//此处设置你默认的一套css
function changecss(url){
if(url!=""){
skin.href=url;
var expdate=new Date();
expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
//expdate=null;
SetCookie("nowskin",url,expdate,"/",null,false);
}
}
然后定义css文件
<link id="skin" rel="stylesheet" type="text/css"/>
再通过下面的方式让用户自行定义皮肤
<a href="javascript:changecss('style1.css')">风格1</a>
<a href="javascript:changecss('style2.css')">风格2</a>
function SetCookie(name,value){
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(2<argc)?argv[2]:null;
var path=(3<argc)?argv[3]:null;
var domain=(4<argc)?argv[4]:null;
var secure=(5<argc)?argv[5]:false;
document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
}
function GetCookie(Name) {
var search = Name + "=";
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end));
}
}
return returnvalue;
}
var thisskin;
thisskin=GetCookie("nowskin");
if(thisskin!="")
skin.href=thisskin;
else
skin.href="style2.css";//此处设置你默认的一套css
function changecss(url){
if(url!=""){
skin.href=url;
var expdate=new Date();
expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
//expdate=null;
SetCookie("nowskin",url,expdate,"/",null,false);
}
}
然后定义css文件
<link id="skin" rel="stylesheet" type="text/css"/>
再通过下面的方式让用户自行定义皮肤
<a href="javascript:changecss('style1.css')">风格1</a>
<a href="javascript:changecss('style2.css')">风格2</a>
展开全部
你的代码中这句document.getElementById('a').className='../../themes/1-1/css/css.css'
是错误的。等号后面不能是css文件名,而是在CSS中定义的class名。
例如,假设该CSS文件中存在一个名为bg1的类
脚本调用document.getElementById('a').className='bg1'
是错误的。等号后面不能是css文件名,而是在CSS中定义的class名。
例如,假设该CSS文件中存在一个名为bg1的类
脚本调用document.getElementById('a').className='bg1'
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这个分2种。如果你不写入cookie那么页面一刷新就没了。
最好是写入cookie这样才是真的换肤。
你可以百度下,很多的。
我自己的不知道放哪里去了。
最好是写入cookie这样才是真的换肤。
你可以百度下,很多的。
我自己的不知道放哪里去了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询