外部CSSファイルを動的に読み込む方法 #CSS

意外とこの方法を紹介してるページが見当たらなかったので、こんな情報もあるよ的な感じで軽く残しておく。

何故この方法を使わなきゃならないのか？
⇒キャッシュがウザいからに他ならない！！ｗｗｗ

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache">
        <link rel="stylesheet" href="./jquery-ui-1.10.4.custom.min.css" />
        <script src="./jquery-1.11.1.min.js"></script>
        <script src="./jquery-ui-1.10.4.custom.min.js"></script>

        <link rel="stylesheet" href="./css.css" /> <!-- ←このCSSを編集後にページ再読込しても読んでくれないのです。 -->

        <!-- なので仕方ないから… -->
        <style type="text/css"></style>
        <script>
            //外部サーバのファイルを読み込む必要がある場合は、これ必須。
            //IEだとページ読み込み前にダイアログが出てウザい。
            jQuery.support.cors = true;

            //複数のファイルを指定できるように配列に
            var css = [
                "css.css",
                "hoge.css",
                "moge.css",
            ];
            var css_src = "";

            $(function() {
                //styleタグの後ろにscriptタグ書けば、onloadイベントでの実行じゃなくても大丈夫かも。

                for (var i in css) {
                    //同期通信＆キャッシュ無視でCSSファイルを読み込み
                    $.ajax({
                        type: "GET",
                        url: css[i],
                        async: false,
                        cache: false,
                        success: function(data) {
                            css_src += data;
                        },
                        error: function(e) {
                            console.log(e);
                            alert("外部CSSファイルの読み込みでエラーが発生しました。\n\n" + css[i]);
                        }
                    });
                }

                //styleタグに読み込んだCSSを埋め込み
                $("style").text(css_src);
            });
        </script>
    </head>
    <body>
    …
    </body>
</html>

スクリプトを改造すれば、ページ読み込んだあとに切り替えも可能ですかね。