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 相关文章推荐
jQuery Tools tab使用介绍
Jul 14 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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模拟登陆的实现方法分析
2015/01/09 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
node.js博客项目开发手记
2018/03/16 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python下载指定页面上图片的方法
2016/05/12 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
《四季》教学反思
2014/04/08 职场文书
2014年秘书工作总结
2014/11/25 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
七年级作文之游记
2019/12/11 职场文书
英镑符号 £
2022/02/17 杂记
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript