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 面向对象全新理练之原型继承
Dec 03 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
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
php获取操作系统语言代码
2013/11/04 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python 内置模块详解
2019/01/01 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
视图的作用
2014/12/19 面试题
经销商会议欢迎词
2014/01/11 职场文书
趣味游戏活动方案
2014/02/07 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
预备党员公开承诺书
2014/05/28 职场文书
建筑施工安全责任书
2014/07/24 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
小学英语教学反思范文
2016/02/15 职场文书
委托书范本格式
2019/04/18 职场文书
八年级作文之感恩
2019/11/22 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS