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 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
巧用canvas
Jan 21 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
行政部岗位职责范本
2014/03/13 职场文书
父母对孩子说的话
2014/04/12 职场文书
社会学专业求职信
2014/07/17 职场文书
平安建设汇报材料
2014/12/29 职场文书
学期个人自我总结
2015/02/13 职场文书
超市店长竞聘书
2015/09/15 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python