[解決済み] ページを再読み込みせずにCSSを再読み込みする簡単な方法はありますか？

質問

私は、ページを再読み込みする必要なしにスタイルシートを再読み込みして適用するプレビュー機能を備えた、ライブのページ内CSSエディタを作ろうとしています。これについて行くための最良の方法は何でしょうか？

どのように解決するのですか?

edit"ページで、通常の方法でCSSを含める代わりに、( <link> タグで) 記述する代わりに、すべてを <style> タグに記述します。を編集して innerHTML プロパティを編集すると、サーバーへのラウンドトリップがなくても、自動的にページが更新されます。

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

jQueryを使用したJavascriptです。

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

そして、これで終わりです!

本当に派手にやりたかったら、テキストエリアのキーダウンに関数をアタッチします。ただし、望ましくない副作用があるかもしれません (入力中にページが常に変化してしまう)。

編集 : テスト済みで動作します (少なくとも Firefox 3.5 で、他のブラウザでも問題ないはずです)。デモはこちら。 http://jsbin.com/owapi