网站换肤代码示例(javascript)

80酷酷网    80kuku.com

  

最近公司要开发一个房产网,老大要实现cn.yahoo.com首页的换肤功能,这几天研究了一下!发现了一个新的换肤方法,不知道以前有人用过没有!在这里把思路说一下,供大家参考!


在开始动手之前上网找了一下相关的换肤方法!和我以前用过的基本一样!方法如下:
在网页中先导入所有的皮肤文件:

<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>

然后通过js修改Link.disabled属性为true/false,来实现样式表的切换!但是一次必须导入所有的皮肤样式文件,对于我们要开发的网站来说,一次导入的代码过多,会影响网站的打开速度!

昨天在看js资料的时候发现,修改Link.href的属性后,浏览器会即时加载新的样式表,不用做任何触发设置,这正是我想要的,下面说说具体思路:

首先准备好相应的皮肤样式文件,当初次页面加载时值调用默认的皮肤,当浏览者点击换肤按钮时,用js在最后一个LINK标签后加载一个引用相应皮肤样式文件的LINK标签,这样就显示了换肤,浏览器会即时显示换肤后的效果。当点击下一个换肤按钮时,只要切换最后加载的LINK标签的href属性的连接地址就可以了!

因为引用了一个外部js框架,所以代码没办法全贴出来,我把核心的贴一下!

复制内容到剪贴板
代码:
/* =shiftSkin() 更换皮肤
---------------------------------------------------------------------------*/
function shiftSkin(skinName) {
    // 存储当前皮肤名称
    nowSkin = skinName;
    // 格式化皮肤文件连接地址
    var linkHref = '/styles/skin/' + skinName + '.css';
    // 更换皮肤文件
    if(document.getElementById('skin')) {
        // 如果存在引用皮肤的元素节点,则更新皮肤文件连接地址
        document.getElementById('skin').href = linkHref;
    } else {
        // 如果没有引用皮肤的元素节点,则创建引用元素节点
        var linkTag = NET.BYICE.DOM.create('link');
        NET.BYICE.DOM.attr(linkTag, 'id', 'skin');
        NET.BYICE.DOM.attr(linkTag, 'type', 'text/css');
        NET.BYICE.DOM.attr(linkTag, 'rel', 'stylesheet');
        // 赋给当前皮肤文件连接地址
        NET.BYICE.DOM.attr(linkTag, 'href', linkHref);
        // 追加引用皮肤的元素节点
        var links = document.getElementsByTagName('link');
        NET.BYICE.DOM.after(links[links.length-1],linkTag);
    };
    if(skinCookie) {
        skinCookie.skinName = skinName;
        skinCookie.store(30, '/');
    };
    // 调用高亮显示当前皮肤的连接节点元素
    isNowSkin();
};


分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: