Javascript结合css实现网页换肤功能


Posted in Javascript onNovember 02, 2009

Html代码部分:
1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)
<ul id="skin">
<li id="skin_0" title="灰色">灰色</li>
<li id="skin_1" title="绿色">绿色</li>
<li id="skin_2" title="黄色">黄色</li>
<li id="skin_3" title="蓝色">蓝色</li>
<li id="skin_4" title="粉色">粉色</li>
<li id="skin_5" title="紫色">紫色</li>
</ul>
Js部分:
1.换肤方法
//设置cookie,按钮选中状态,页面皮肤
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].className="";//初始化按钮状态
}
skin.setCookie(n);//保存当前样式
("skin_"+n).className="selected";//设置选中皮肤按钮的样式
("cssfile").href="css/main"+n+".css";//设置页面样式
}
2.存取cookie
//将当前皮肤n存到cookie
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//返回用户设置的皮肤样式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//如果没有设置则显示默认样式
}
else{
var start=mycookie.indexOf("=",start1)+1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
3.绑定换肤按钮事件
skin.addEvent=function(){
var skins =("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤样式
window.onload=function(){
skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
skin.addEvent();//绑定按钮事件

Javascript 相关文章推荐
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
jquery if条件语句的写法
May 19 Javascript
js实现省市级联效果分享
Aug 10 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
html5调用摄像头截图功能
Jan 18 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 #Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 #Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 #Javascript
提高网站性能之 如何对待JavaScript
Oct 31 #Javascript
JavaScript Sort 表格排序
Oct 31 #Javascript
DOM 脚本编程中的兄弟节点
Oct 31 #Javascript
javascript GUID生成器实现代码
Oct 31 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
php引用返回与取消引用的详解
2013/06/08 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP常用技巧汇总
2016/03/04 PHP
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python采集百度百科的方法
2015/06/05 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
酒店司机岗位职责
2013/12/14 职场文书
二手书店创业计划书
2014/01/16 职场文书
社区党员先进事迹
2014/01/22 职场文书
物流业务员岗位职责
2014/02/08 职场文书
教师新年寄语
2014/04/03 职场文书
和解协议书
2014/04/16 职场文书
成绩单家长评语大全
2014/04/16 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
中学推普周活动总结
2015/05/07 职场文书
荒岛余生观后感
2015/06/09 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL