JavaScriptで動的にCSSクラスを作成して適用する方法

方法1: classListプロパティを使用する方法 この方法では、JavaScriptのclassListプロパティを使用して要素にクラスを追加します。

// CSSクラスを作成
var style = document.createElement('style');
style.innerHTML = '.dynamic-class { color: red; }';
// head要素にスタイルを追加
document.head.appendChild(style);
// 要素にクラスを追加
var element = document.getElementById('myElement');
element.classList.add('dynamic-class');

方法2: style要素を作成して適用する方法 この方法では、JavaScriptでstyle要素を作成し、その中にクラスのスタイルを定義します。そして、作成したstyle要素をhead要素に追加します。

// style要素を作成
var style = document.createElement('style');
style.type = 'text/css';
// クラスのスタイルを定義
var css = '.dynamic-class { color: red; }';
style.appendChild(document.createTextNode(css));
// head要素にstyle要素を追加
document.head.appendChild(style);
// 要素にクラスを追加
var element = document.getElementById('myElement');
element.classList.add('dynamic-class');

方法3: CSSStyleSheetオブジェクトを使用する方法 この方法では、CSSStyleSheetオブジェクトを使用してCSSクラスを動的に作成し、適用します。

// CSSStyleSheetオブジェクトを作成
var styleSheet = new CSSStyleSheet();
// クラスのスタイルを定義
var css = '.dynamic-class { color: red; }';
// CSSクラスを追加
styleSheet.replaceSync(css);
// styleSheetをdocumentに追加
document.adoptedStyleSheets = [styleSheet];
// 要素にクラスを追加
var element = document.getElementById('myElement');
element.classList.add('dynamic-class');

これらの方法を使用すると、JavaScriptで動的にCSSクラスを作成し、要素に適用することができます。適切な方法を選択し、必要に応じてスタイルを変更してください。