js+css简单实现网页换肤效果
更新时间：2015年12月29日 10:20:05 作者：淳淳刚刚
这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了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);
}
}
}
实现效果：
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了 JavaScript中 创建动态 QML 对象，下面文章主要分析了两中方法，分别是从 QML 字符串创建对象和动态创建组件以及删除对象等方法，具有有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
JavaScript 设计模式 富有表现力的Javascript（一）
javascript设计模式是图灵出版，学习中力求每个章节都细看。2010-05-05
JavaScript默认的时间格式我们一般情况下不会用，所以需要进行格式化，下面小编给大家带来了三种js date对象格式化实例代码，需要的朋友参考下吧2017-09-09![[全兼容哦]--实用、简洁、炫酷的页面转入效果loing](//img.jbzj.com/images/xgimg/bcimg4.png)
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing...2007-05-05
javasciprt下jquery函数$.post执行无响应的解决方法
这篇文章主要介绍了javasciprt下jquery函数$.post执行无响应的解决方法,需要的朋友可以参考下2014-03-03
本文主要介绍了js模拟微博发布消息的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢 答案是克隆.2008-12-12
这篇文章主要介绍了js+css实现文字散开重组动画特效,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了ES6使用Set数据结构实现数组的交集、并集、差集功能,结合实例形式分析了ES6中Set数据结构的相关函数与实现数组交集、并集、差集的相关操作技巧,需要的朋友可以参考下2017-10-10
![[全兼容哦]--实用、简洁、炫酷的页面转入效果loing](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论