JavaScriptセットのCSSセット

あなたが段落を持っていると言いましょう.

<p id="target">rainbow 🌈</p>

そして、あなたはそれがJSと色を変更する必要があります.どんな選択肢がありますか.

インラインスタイル

最も簡単なパス.DOMから要素を照会し、インラインスタイルです.

document.getElementById('target').style.color = 'tomato';

短くて簡単.

2 .グローバルスタイル

もう一つのオプションは<style> タグ、CSSルールでそれを記入し、タグをDOMに追加します.

  var style = document.createElement('style');
  style.innerHTML = `
  #target {
  color: blueviolet;
  }
  `;
  document.head.appendChild(style);

CSSOMインサート

番目のオプションは、あまり知られていません.私たちはCSSStyleSheet insertRule メソッド.

  var style = document.createElement('style');
  document.head.appendChild(style);
  style.sheet.insertRule('#target {color: darkseagreen}');

それは2番目のオプションに似ているかもしれないが、それは間違いなく異なっている.

クロムdevtoolsで見ることができます.<style> タグは空ですが、要素にはDarseseAgreen Colorが適用されます.また、色はdevtoolsを介して変更することはできませんクロムediting dynamic CSS styles .
実際、このような行動は、このポストを書く動機でした.JSライブラリで人気のCSSStyled Components パフォーマンスのために生産モードでスタイルを注入するために、この機能を使用してください.この機能は特定のプロジェクトまたは環境で望ましくないかもしれません、そして、一部の人々はプロジェクトの問題でそれについて不満を言います.

構築可能なスタイルシート( 2019年7月更新)

今すぐ作成することが可能ですCSSStyleSheet JavaScriptからのオブジェクト.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];

詳細はhere .
このオプションはChromeでのみ有効です.
JavaScriptを使用してスタイルを追加する他のオプションを知っていますか?近頃のあなたの好ましいオプションは何ですか.
読書ありがとう!