jQueryで動的にSTYLEタグを追加

jQueryを使えば動的に要素にCSSスタイルを適用することは簡単にできますが、要素には予めクラスを指定しておいて、後からスタイルを突っ込めたら便利です。
試してみると、jQueryを使えば以下のような感じでやればいけるみたいです。

addstyle.js

$(function(){
  var style = '';
  style += '<style type="text/css" id="StyleId">';
  style += '.item1 { color:red; }';
  style += '.item2 { color:blue; }';
  style += '.item3 { color:green; }';
  style += '.item4 { color:yellow; }';
  style += '.item5 { color:purple; }';
  style += '</style>';
  $('head').append(style);
});

ちなみに、#text() でSTYLEタグの中身の要素を入れようとしてもうまくいかなかったので、上記のようにDOM文字列を直接突っ込んだらうまくいきました。STYLEタグを作成するときにidなどをつけておけば、

$('#remove-button').on('click', function(){
  $('#StyleId').remove();
});

のようにして後から動的にそのスタイルを除去するのも簡単ですね。