JavaScriptでCSSを動的に追加：styleタグとinsertRuleによるクラス定義の実例

JavaScriptを使って、styleタグを動的に生成し、insertRuleでCSSルールを追加することで、ページ読み込み後にスタイルを柔軟に制御できます。
このページでは、クラスの定義・適用・切り替えを含む、insertRuleを使ったCSSの動的追加の方法を、実際のコード例とともに紹介します。
インラインスタイルやsetPropertyを使わず、構造的にCSSを管理したい方におすすめの手法です。

■CSSの動的生成とクラスの設定

<script>
  //スタイル エレメントを作成
  let style1 = document.createElement("style");
  //スタイルをヘッダに入れる
  document.head.appendChild(style1);
  //スタイルシートの設定
  style1.sheet.insertRule( ".stl1{ margin:0;padding:0;color:#FF9999;}", 0 );
  
  let elm=document.getElementById('memo');
  //classを適用
  elm.classList.add("stl1"); //class="stl1"を設定する
</script>

<p id="memo">ここにクラス「stl1」を適用<p>

■CSSの動的生成とクラスの確認、設定と解除

<script>
  //スタイル エレメントを作成
  let style2 = document.createElement("style");
  //スタイルをヘッダに入れる
  document.head.appendChild(style2);
  //スタイルシートの設定
  style2.sheet.insertRule(".stl2{margin:0;padding:0;color:#9999FF;font-size:20px;}",0);
  //スタイルシートの設定
  style2.sheet.insertRule(".stl3{margin:4px;padding:0;color:#33FF33;}",0);
  
  let elm2=document.getElementById('memo2');
  //classを適用
  elm2.classList.add("stl2"); //class="stl2"を設定する 
  
  //クラスに"stl2"が含まれているか確認する
  if(elm2.classList.contains("stl2")){
    elm2.classList.remove("stl2");  //class="stl2"を削除する
  }
  elm2.classList.add("stl3");  //class="stl3"を設定する
  
</script>

<p id="memo2">ここにクラス「stl3」を適用<p>

※ insertRuleでは @import や @media など、一部のルールは追加できません。
また、セレクタや構文に誤りがあると例外が発生するため、try-catchでの保護も有効です。