网站换肤技术网页皮肤设计修改
换肤技术原理:很简单,动态改变需要的css文件就可以了.如果需要保存,设置cookie即可.
具体的说:
1.CSS设置部分: 通常,你需要写一个网站通用的CSS文件,该文件一般只控制css的位置布局,不设计颜色,背景布局 然后有多个换肤方案的css文件,这里就只控制颜色,背景 2.JS部分: 有一个换肤函数,替换link中的需要的css 有cookie读写函数,用于保存设置
换肤函数可以这么写:
view plaincopy to clipboardprint?
//====================换肤效果=====================
/*函数: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;
}
//===================调用=====================
window.onload = function() {
var d_css_document=css_document;//默认的css文件,比如css/green.css
var cookie = get_cookie(cookie_name);//读取cookie
var css_document=cookie?cookie:d_css_document;//cookie是否存在
change_css(css_id,css_document,cookie_name);//修改样式,当然,你要填入你自己的参数
}
<DIV onclick=change_css(css_id,css_document,cookie_name)></DIV>
比如:
<LINK id=style media=all href="css/null.css" type=text/css rel=stylesheet> //这里的href写一个不存在的css,并设置id
<DIV id=skin_green onclick="change_css('style','css/green.css','style')"></DIV> //换肤
==========================================================
上一条： 如何制作一个静态网页教程
下一条： 网站换肤设计用js+css切换样式表实现
