Javascript实现换肤功能
<script type="text/javascript">
//====================换肤效果=====================
/*函数:change_css(css_id,css_document)
*功能:自定义版面色彩样式,并写入cookie,保存
*参数:
css_id:要被替换的css文件在页面中的id
css_document:要使用的css文件的路径
cookie_name:要设置的该样式的cookie名称
*返回值:
无
*--------------------------------*/
function change_css(css_id,css_document,cookie_name){
document.getElementById(css_id).setAttribute("href",css_document);
set_cookie(cookie_name,css_document,365);//保存为1年,当然,你也可以把它分离出来,做为参数设置
}
//====================cookie函数====================
/*--函数名:set_cookie
*--功能:设置cookie,只能自定义一个cookie的名和值,设置多个时需要多次调用
*--参数:
c_name:自定义cookie名
c_value:自定义cookie值
可选c_expires:设置该cookie的存活时间,单位:天
可选c_path:设置该cookie的路径
可选c_domain:设置该cookie的域
可选c_secure:设置是否安全cookie,1安全,0或不设置,不安全
*--返回值:
无
*--------------------------------*/
function set_cookie(c_name,c_value,c_expires,c_path,c_domain,c_secure){
var cookie_string=c_name + "=" + escape(c_value);
if(c_expires){
var expires = new Date();
expires.setTime(expires.getTime() + c_expires * 24 * 60 * 60 * 1000);
cookie_string+=";expires="+expires;
}
if(c_path){
cookie_string+=";path="+c_path;
}
if(c_domain){
cookie_string+=";domain="+c_domain;
}
if(c_secure){
cookie_string+=";secure";
}
document.cookie=cookie_string;
}
/*--函数名:get_cookie
*--功能:读取需要的cookie
*--参数:
c_name:要读取的cookie名
*--返回值:
value:要读取的cookie的值
*--------------------------------*/
function get_cookie(cookie_name){
var cookie_pos = document.cookie.indexOf(cookie_name);
// 如果找到了索引，就代表cookie存在，反之，就说明不存在。
if (cookie_pos != -1){
// 把cookie_pos放在值的开始，只要给值加1即可。
cookie_pos += cookie_name.length + 1;
var cookie_end = document.cookie.indexOf(";", cookie_pos);
if (cookie_end == -1){
cookie_end = document.cookie.length;
}
var value = unescape(document.cookie.substring(cookie_pos,cookie_end));
}
return value;
}
//=======================================================================================================
function changCss1(){
change_css('cssfile1','themes/default/css/global.css','style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2','themes/default/css/layout.css','style2');
}
function changCss2(){
change_css('cssfile1','themes/redeye/css/global.css','style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2','themes/redeye/css/layout.css','style2');
}
function changCss3(){
change_css('cssfile1','themes/memory/css/global.css','style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2','themes/memory/css/layout.css','style2');
}
function changCss4(){
change_css('cssfile1','themes/helloworld/css/global.css','style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2','themes/helloworld/css/layout.css','style2');
}
function changCss5(){
change_css('cssfile1','themes/greenphotos/css/global.css','style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2','themes/greenphotos/css/layout.css','style2');
}
function changCss6(){
change_css('cssfile1','themes/wrkcolor/css/global.css','style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2','themes/wrkcolor/css/layout.css','style2');
}
window.onload = function() {
var d_css_document1="themes/default/css/global.css";//默认的css文件,比如css/green.css
var d_css_document2="themes/default/css/layout.css";
var cookie1 = get_cookie("style1");//读取cookie
var cookie2 = get_cookie("style2");//读取cookie
var css_document1=cookie1?cookie1:d_css_document1;//cookie是否存在
var css_document2=cookie2?cookie2:d_css_document2;//cookie是否存
change_css('cssfile1',css_document1,'style1');//修改样式,当然,你要填入你自己的参数
change_css('cssfile2',css_document2,'style2');
}
//========================================================================================================
/*这里是对首页下拉列表进行控制
--------------------------------*/
function changecss(obj){
var selectvalue = obj.options[obj.selectedIndex].value;
switch(selectvalue){
case "1":
changCss1();
break;
case "2":
changCss2();
break;
case "3":
changCss3();
break;
case "4":
changCss4();
break;
case "5":
changCss5();
break;
case "6":
changCss6();
break;
}
location.reload();
}
</script>
