js动态修改整个页面样式达到换肤效果


Posted in Javascript onMay 23, 2014

jsPro1\js动态修改整个html页面样式(换肤).html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>动态修改页面样式</title> 
<link href="css/blue.css" rel="stylesheet" id="mylink"/> 
<script type="text/javascript"> 
function gel(id) { 
return document.getElementById(id); 
} window.onload = function() { 
//更换css文件 
var lis = gel("uList").childNodes; 
for (var i = 0; i < lis.length; i++) { 
if (lis[i].nodeType == 1) { 
lis[i].onclick = function () { 
gel("mylink").href = "css/" + this.className + ".css"; 
}; 
} 
} 
}; 
</script> 
</head> 
<body> 
<div> 
<span>修改整个页面的样式</span><br/> 
<input type="text" id="txt"/> 
<input type="button" value="提交" class="btn"/> 
</div> 
<ul id="uList" style="text-decoration: none;margin-top: 100px;"> 
<li style="display: block;width: 30px;height: 20px;background-color: red;" class="red"></li> 
<li style="display: block;width: 30px;height: 20px;background-color: blue" class="blue"></li> 
</ul> 
</body> 
</html>

jsPro1\css\red.css
* { 
margin: 0px;padding: 0px; 
} 
body { 
background-color: #eeeeee; 
} 
span { 
color: red; 
} 
#txt { 
color: #f00;border: 1px solid #7d1515; 
} 
.btn { 
background-color: #a52a2a;border: none;color: white;width: 100px;height: 28px; 
}

jsPro1\css\blue.css
* { 
margin: 0px;padding: 0px; 
} 
body { 
background-color: #eeeeee; 
} 
span { 
color: blue; 
} 
#txt { 
color: #0000cd;border: 1px solid #006400; 
} 
.btn { 
background-color: #0000cd;border: none;color: white;width: 100px;height: 28px; 
}
Javascript 相关文章推荐
json原理分析及实例介绍
Nov 29 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 #Javascript
javascript为下拉列表动态添加数据项
May 23 #Javascript
js检测网络是否具体连接功能的代码
May 23 #Javascript
JS实现距离上次刷新已过多少秒示例
May 23 #Javascript
jquery动态添加元素事件失效问题解决方法
May 23 #Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 #Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python取代netcat过程分析
2018/02/10 Python
Django model update的多种用法介绍
2020/03/28 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
什么是Assembly(程序集)
2014/09/14 面试题
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
聘用意向书
2014/07/29 职场文书
见习报告格式要求
2014/11/04 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
考研英语辞职信
2015/05/13 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android