JavascriptでCSSを追加する

JavascriptでCSSを追加する方法についてメモです。 document.createElementおよびdocument.body.appendChildを使用します。

こんな感じ。

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".article-body p {margin: 0 0 10em;}";
document.body.appendChild(css);

chromeデベロッパーツールのコンソールにコピペすれば即座反映できます。

.styleしか知らなかったけど、こういうやり方のほうがいろいろできますね。 .styleだと、pを指定するってことはできても、.article-body pみたいに複数指定してやるっていう書き方ができないんですよね。

このやり方ならcssファイル編集する感覚で追加できるので、便利ですね。