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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
JS数组去重详情
Nov 07 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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
请离开include_once和require_once
2013/07/18 PHP
三种php连接access数据库方法
2013/11/11 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python视频按帧截取图片工具
2019/07/23 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
法制宣传教育方案
2014/05/09 职场文书
工程项目合作意向书
2015/05/08 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL