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程序设计有所帮助。
相关文章
在JavaScript 中按字母排序之如何在 JS 中按名称排序
有时你可能有一个单词数组,你想按字母顺序(从 a-z)对每个单词进行排序,或者你可能有一个包含用户信息(包括名字)的对象数组,例如,你想按照用户的名字来排序,接下来通过本文给大家介绍在JavaScript 中按字母排序之如何在 JS 中按名称排序,需要的朋友可以参考下2023-09-09JavaScript监测ActiveX控件是否已经安装过的代码
这是通用的方法,只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了。(找了两个小时才找到 -_-!)2008-09-09underscore之Collections_动力节点Java学院整理
underscore为集合类对象提供了一致的接口。集合类是指Array和Object,暂不支持Map和Set。下面通过本文给大家分享underscore之Collections的相关知识,需要的的朋友参考下吧2017-07-07
最新评论