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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
js获取Get值的方法
Sep 29 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解JS模块导入导出
Dec 20 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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.NET的入门教程
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
jquery ajax post提交数据乱码
2013/11/05 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
简单实现python爬虫功能
2015/12/31 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
基于python plotly交互式图表大全
2019/12/07 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
药学专业大学生自荐信
2013/09/28 职场文书
商业融资计划书
2014/04/29 职场文书
商务经理岗位职责
2014/08/03 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
陪护人员误工证明
2015/06/24 职场文书
python基础之函数的定义和调用
2021/10/24 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
nginx之queue的具体使用
2022/06/28 Servers
Linux中各个目录的作用与内容
2022/06/28 Servers