JavaScriptでCSSを埋め込む

2018年7月30日

やりたいこと。

jQureyのcss()じゃなくてCSSの書式で書いたスタイルをJavaScriptで適用したい!といった人がいるのかは知りませんがそういった人向けの記事。

やりかたは簡単で、style要素を作成して追加するだけです。以下がサンプルコードになります。

サンプルコード

// 新しいstyle要素を作成
var newStyle = document.createElement('style');
newStyle.type = 'text/css';
// CSSの内容を書く
newStyle.innerText = 'p {background-color: red}';
// HEAD要素の最後に作成したstyle要素を追加
document.getElementsByTagName('HEAD').item(0).appendChild(newStyle);

解説

単純なコードなので説明の必要は無いかもしれませんが一応説明します。

// 新しいstyle要素を作成
var newStyle = document.createElement('style');
newStyle.type = 'text/css';

createElementで新しい要素を作成します。引数には何の要素を作成するかを渡します。
今回はstyleタグを作成したいので引数は'style'です。

また、作成したElementのtypeプロパティに入れた値がtype属性として設定されます。
今回type="text/css"を設定したいため、'text/css'を代入しています。

// CSSの内容を書く
newStyle.innerText = 'p {background-color: red}';

更に作成したElementのinnerTextプロパティに適用したいCSSのコードを代入します。今回は1行のみのコードですが、コードが長くなると見づらくなりそうですね。

// HEAD要素の最後に作成したstyle要素を追加
document.getElementsByTagName('HEAD').item(0).appendChild(newStyle);

作成したstyle要素をappendChildでHEAD要素の最後に追加したら完了です。

結果

サンプルコードを実行すると、 以下のようなstyle要素がHEAD要素の最後に追加されて全てのP要素の背景が赤色になるはずです。

<style type='text/css'>p {background-color: red}</style>

CSS以外にも何か無理やりぶち込みたいものがあったら使えそうですね。

おしまい。