源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-07-10 20:17 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js+css简单实现网页换肤效果
本文实例讲述了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);
   }
  }
}

实现效果: [img]http://files.jb51.net/file_images/article/201512/20151229103608683.jpg?20151129103648[/img] [img]http://files.jb51.net/file_images/article/201512/20151229103652560.jpg?2015112910375[/img] [img]http://files.jb51.net/file_images/article/201512/20151229103708585.jpg?20151129103723[/img] 希望本文所述对大家JavaScript程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部