CSSを動的に追加する

要素を動的に生成し、headの子要素として追加する

head内にCSSを記述するのと同じ結果になります。

jQueryのcssメソッドとは異なり、要素そのものにスタイルは直書きされません。

パフォーマンス向上のため、ページ読込み後に意図的に特定のスタイルシートを適用する場合などに使われるようです（個人的には、CSSをいじれないけれどどうしてもスタイルを追加したいときに使っていました）。

考え方はいたってシンプルで、style要素を生成して、headに追加するという方法です。

ポイントは、テキストノードを生成して、styleの子要素として追加する点です(4行目） 。

文字列にメディアクエリを含めても問題なく動作します。

var head = document.getElementsByTagName('head').item(0);
var style = document.createElement('style');
var text = 'body{background-color:#000;}　p{color:#fff;}';
var rule = document.createTextNode(text);
style.media = 'screen';
style.type = 'text/css';
style.appendChild(rule);
head.appendChild(style);

外部ファイルを読ませたいならば、同じ要領でlink要素を生成してからhrefプロパティにパスを代入すればよいそうです。

var head = document.getElementsByTagName('head').item(0);
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../../hoge.css';
link.type = 'text/css';
head.appendChild(link);