jQueryでCSSを書き換えたり元通りに戻したりする

今回はCSSを後から書き換える２つの方法を実装してみました。

といいましても片方の方法は以前の記事のものを使っております
http://d.hatena.ne.jp/Arko/20090304/1236174580
↑この記事の延長になります

・CSSファイルを関数が実行されたときに読み込む方法
・styleタグを内部で宣言して適用する方法
CSSファイル内ではプログラムが書けないため、そゆときは２つめの方法を使ってみることにしました。

JS

CSSを書き換えたりする関数
function add() {
    //あらかじめ作っておいた外部のCSSを読み込みます。このCSSを適用させます。
    var cs = document.createElement("link");
    cs.rel="stylesheet";
    cs.href="/css/hoge.css";
    cs.type="text/css";
    //ここだけ前回の記事と違いJQueryでやってます。短くなった。
　　$("head").append(cs);

    //すべてのタグにclass="bodybreak"を設定しますと上で設定したCSSが適用されます
    $("*").addClass("bodybreak");

　　//ここで背景画像だけランダム表示させたいのでまた別の処理を加えます。まずは乱数を作る。
　　rand = Math.floor(Math.random() * 4 + 1);

　　//CSSを直接書き換えてしまうとNG。なぜなら後から元に戻せないため
    //またCSSを複数用意するのも面倒なので今回はNGとします。1部分しかランダムにしないので。
　　//$("body.bodybreak").css("background", "url("/img/bg_0"+rand+".gif)");
    //なのでstyleタグを挿入して後からこれを消せば、元に戻せるようにします

　　$("body").before('<style id="hogebg" type="text/css">body.bodybreak{background: url(/img/bg_0'+rand+'.gif)} </style>');
　　//これで背景のみ毎回ランダムな画像に！！
　　
}

書き換えたCSSを元に戻す関数
function remove() {
　　//CSSファイルを適用したものを元に戻します。
    $(".bodybreak").removeClass("bodybreak");
　　//背景画像のみstyleタグ使ってるのでそれを削除します。styleにはclass使えないけどidは使えるそうな
　　$("style#hogebg").remove();
}

だいたいこんなかんじ