js动态换肤

 

jQuery.extend({ 

02     //根据ID查找样式，如果存在则删除这个样式 

03     removeStyleSheet: function(id) { 

04         var existing = document.getElementById(id); 

05         if (existing) { 

06             existing.parentNode.removeChild(existing); 

07         } 

08     },  

09     //风格切换  id：样式标识ID   url：样式路径 

10     swapStyleSheet: function(id, url) { 

11         var doc = document; 

12         this.removeStyleSheet(id); 

13         var ss = doc.createElement("link"); 

14         ss.setAttribute("rel", "stylesheet"); 

15         ss.setAttribute("type", "text/css"); 

16         ss.setAttribute("id", id); 

17         ss.setAttribute("href", url); 

18         doc.getElementsByTagName("head")[0].appendChild(ss); 

19     } 

20 });

然后我们就可以在调用这个方法来实现换肤功能：

view sourceprint?$.swapStyleSheet("DefaultStyle", "Styles/DefaultStyle.css");

如果你的网站样式比较固定 那么可以使用以下的JS方法:

view sourceprint?function C(id) { 

    return !id ? null : document.getElementById(id); 

} 

// 风格切换  cssname css文件名 

function themestyle(cssname) { 

    if (!C('themestyle')) { 

        css = document.createElement('link'); 

        css.id = 'themestyle', 

        css.type = 'text/css'; 

        css.rel = 'stylesheet'; 

        var headNode = document.getElementsByTagName("head")[0]; 

        headNode.appendChild(css); 

    } 

    // 引用的CSS文件的地址 

    C('themestyle').href = 'Styles/' + cssname + '.css';