jQuery-js如何实现页面无刷新css皮肤切换并兼容多个浏览器

Question

想利用jquery实现页面无刷新的样式切换:
按着自己的思路实现了一个：
现：发现在chrome和firefox都正常，
在ie中失败：
这里贴一下我的实现：

/** ********** chemeswitcher start************** */
var _default_skins =
[
        {
            group : "jqueryui",
            hrefTemplate : "{contextPath}/jquery-ui/themes/{id}/jquery-ui.css",
            ids :
            [
                    "black-tie", "blitzer", "cupertino", "dark-hive",
                    "dot-luv", "eggplant", "excite-bike", "flick",
                    "hot-sneaks", "humanity", "le-frog", "mint-choc",
                    "overcast", "pepper-grinder", "redmond", "smoothness",
                    "south-street", "start", "sunny", "swanky-purse",
                    "trontastic", "vader","boda"
            ]
        },
        {
            group : "wijmo",
            hrefTemplate : "{contextPath}/wijmo/themes/{id}/jquery-wijmo.css",
            ids :
            [
                    "arctic", "aristo", "cobalt", "metro", "metro-dark",
                    "midnight", "rocket", "sterling"
            ]
        }
];
/*
 * 定义chemeswitcher
 */
(function($, undefined)
{   
    $.extend(
    {
        inittheme: function(themeCookieName,contextPath,skins){
            var _skins = skins != null ? skins : _default_skins;
            
            var tempalteMap = {};

            $.each(_skins, function(i, skingroup)
            {
                $.each(skingroup.ids, function(index, skin)
                {
                    tempalteMap[skin] =
                    {
                        id : skin, contextPath : _contextPath,
                        hrefTemplate : skingroup.hrefTemplate
                    };
                });
            });
            
            var cookieparamStr = $.cookie(themeCookieName);
            var paramObj = null;
            if (cookieparamStr != null)
            {
                paramObj = $.parseJSON(cookieparamStr);
            }
            
            if (paramObj && paramObj.id)
            {
                $.switchtheme(paramObj.id, _contextPath,
                                tempalteMap[paramObj.id].hrefTemplate,
                                themeCookieName);
            }
        },
        switchtheme : function(id, contextPath, template, themeCookieName)
        {
            var paramObj =
            {
                id : id, contextPath : contextPath, template : template
            };
            var $themes = $(document).find("link[title=theme]");
            if ($themes.filter("#" + id).size() > 0)
            {
                $themes.not("#" + id).attr("disabled", "disabled");
                $themes.filter("#" + id).removeAttr("disabled");
            }
            else
            {
                $themes.attr("disabled", "disabled");
                $themes.last().after(
                        $("<link/>").attr(
                                {
                                    rel : "stylesheet",
                                    type : "text/css",
                                    title : "theme",
                                    id : id,
                                    href : template.replace("{contextPath}",
                                            contextPath).replace("{id}", id)
                                }));
            }
            $.cookie(themeCookieName, "" + $.toJsonString(paramObj),
            {
                path: '/',
                expires : 365
            });
        }
    });

    $.widget("tx.chemeswitcher",
    {
        options :
        {
            themeCookieName : "tx_cheme", 
            contextPath : ".",
            skins : _default_skins
        },
        _create : function()
        {
            var element = this.element;
            var _this = this
            var options = this.options;
            var _contextPath = options.contextPath;
            var _themeCookieName = options.themeCookieName;
            var _skins = options.skins != null ? options.skins : _default_skins;

            element.empty();
            var $select = $("<select/>").appendTo($(element));
            var tempalteMap = {};

            $.each(_skins, function(i, skingroup)
            {
                var $selectGroup = $("<optgroup/>").attr("label",
                        skingroup.group).appendTo($select).attr("id",
                        skingroup.group).attr("hrefTemplate",
                        skingroup.hrefTemplate);
                $.each(skingroup.ids, function(index, skin)
                {
                    $("<option/>").attr("id", skin).val(skin).text(skin)
                            .appendTo($selectGroup).chan;
                    tempalteMap[skin] =
                    {
                        id : skin, contextPath : _contextPath,
                        hrefTemplate : skingroup.hrefTemplate
                    };
                });
            });
            $select.change(function()
            {
                var _$self = $(this);
                var _id = _$self.val();
                $.switchtheme(_id, _contextPath, tempalteMap[_id].hrefTemplate,
                        _themeCookieName);
            });
        }, _init : function()
        {
            $(this.element).find("select").wijdropdown({

            });
        }, destroy : function()
        {
            $(this.element).find("select").wijdropdown("destroy");
        }
    });
})(jQuery);

/** ********** chemeswitcher end ************** */

Answer 1

自己解决了：
解决办法如下:

$themes.attr("disabled", "disabled");
if($.browser.msie){
var css_href = template.replace("{contextPath}",
contextPath).replace("{id}", id);
var styleTag = document.createElement("link");
styleTag.setAttribute('type', 'text/css');
styleTag.setAttribute('rel', 'stylesheet');
styleTag.setAttribute('href', css_href);
$("head")[0].insertBefore(styleTag);

css_href = null;
styleTag = null;
}else{
$themes.last().after($("<link/>").attr({
rel : "stylesheet",
type : "text/css",
title : "theme",
id : id,
href : template.replace("{contextPath}",
contextPath).replace("{id}", id)
}));
}

Answer 2

没仔细看你的代码，我觉得换肤功能可以这么实现：
皮肤A样式表 a.css 皮肤B样式表 b.css
点击切换按钮是，用js去修改样式文件
比如原来是
<link type="text/css" rel="stylesheet" href = "a.css">

点击后
<link type="text/css" rel="stylesheet" href = "b.css">
不就换掉了吗？

置于你的样式兼容不兼容，需要你在两个样式表里面写样式来处理css在各个浏览器里面的各种情况