js+css简单实现网页换肤效果


Posted in Javascript onDecember 29, 2015

本文实例讲述了js+css简单实现网页换肤效果。分享给大家供大家参考,具体如下:

这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢?

3个按钮如下:

<a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br/><br/>
<a id="skin2" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('gray')">灰色皮肤</a><br/><br/>
<a id="skin3" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('unite')">自定义皮肤</a>

js 代码:

// 更换主题
function changeCss(cssName) {
  if (document.getElementsByTagName_r("link").length > 0) {
   for(var i = 0 ; i < document.getElementsByTagName_r("link").length; i++){
    var ctrlLink = document.getElementsByTagName_r("link")[i];
    var cssOld = ctrlLink.getAttribute("href");
    var cssNew = cssOld.replace("default", cssName);
    cssNew = cssNew.replace("gray", cssName);
    cssNew = cssNew.replace("unite", cssName);
    ctrlLink.setAttribute("href", cssNew);
   }
  }
}

实现效果:

js+css简单实现网页换肤效果

js+css简单实现网页换肤效果

js+css简单实现网页换肤效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
Jquery使用小技巧汇总
Dec 29 #Javascript
js为什么不能正确处理小数运算?
Dec 29 #Javascript
javascript从作用域链谈闭包
Jul 29 #Javascript
你有必要知道的25个JavaScript面试题
Dec 29 #Javascript
JavaScript仿支付宝密码输入框
Dec 29 #Javascript
js实现商城星星评分的效果
Dec 29 #Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 #Javascript
You might like
php执行sql语句的写法
2009/03/10 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
详解Python3定时器任务代码
2019/09/23 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
毕业生个人求职信范例分享
2013/12/17 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
小学德育工作总结2015
2015/05/12 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
队列队形口号
2015/12/25 职场文书
导游词之湖北武当山
2019/09/23 职场文书