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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
浅析JS异步加载进度条
May 05 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
jQuery事件对象总结
Oct 17 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 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
解析php时间戳与日期的转换
2013/06/06 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
表单内同名元素的控制
2006/11/22 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Python实现代码块儿折叠
2020/04/15 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
信息部岗位职责
2013/11/12 职场文书
继承公证书
2014/04/09 职场文书
建筑施工安全责任书
2014/07/24 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
行政助理岗位职责
2015/02/10 职场文书
导游词之五台山
2019/10/11 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis