Javascriptでスタイルタグ（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>