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-08-08
这篇文章主要介绍了TypeScript 中实现接口的类,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了js显示世界时间的方法,可现实世界各大城市的当前时间,涉及JavaScript针对时间的获取与运算操作技巧,需要的朋友可以参考下2016-04-04
话说上期我们讨论了队列管理组件的设计，并且给它取了个响亮而独特的名字：Smart Queue. 这次，我们要将之前的设计成果付诸实践，用代码来实现它。2009-10-10
下面小编就为大家带来一篇浅谈在fetch方法中添加header后遇到的预检请求问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JS表格组件神器bootstrap table详解（强化版）
这篇文章主要以实例的方式为大家再次介绍了JS表格组件神器bootstrap table，bootstrap table界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端，需要了解更多bootstrap table的朋友可以参考下2016-05-05
Element ui tree(树)实现父节点选中时子节点不选中父节点取消时子节点自动取消功能
Elementui因为vue在国内的影响而受益 使用量巨大树作为一种重要的开发组件应用广泛，今天带大家了解树的灵活应用首先我们来创建一个树，对Element ui tree父节点选中时子节点不选中功能感兴趣的朋友跟随小编一起看看吧2023-07-07
这篇文章主要介绍了js 动态获取元素宽高的几种方式,文章通过代码示例和图文结合的方式给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
在线一元二次方程式计算器实例分享，大家参考使用吧2013-12-12
这篇文章主要为大家详细介绍了微信小程序模板之分页滑动栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最新评论