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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
javascrip关于继承的小例子
May 10 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
javascript History对象原理解析
Feb 17 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
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
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Javascript !!的作用
2008/12/04 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
python 实现视频 图像帧提取
2019/12/10 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python实现批量转换图片为黑白
2020/06/16 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
班组长工作职责
2013/12/25 职场文书
项目副经理岗位职责
2013/12/30 职场文书
环保建议书作文
2014/03/12 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
《小小的船》教学反思
2016/02/18 职场文书