JavaScriptで複数のスタイルを追加する方法

方法1: classListを使用する方法

// HTML要素の取得
const element = document.getElementById('myElement');
// 複数のスタイルを追加するクラス名を定義
const class1 = 'style1';
const class2 = 'style2';
// classListプロパティを使用してクラスを追加
element.classList.add(class1, class2);

方法2: styleプロパティを使用する方法

// HTML要素の取得
const element = document.getElementById('myElement');
// 複数のスタイルを追加
element.style.color = 'red';
element.style.fontWeight = 'bold';

方法3: CSSクラスを直接設定する方法

// HTML要素の取得
const element = document.getElementById('myElement');
// 複数のスタイルを追加するCSSクラスを定義
const styles = `
  color: blue;
  font-size: 16px;
`;
// styleプロパティにCSSクラスを設定
element.style.cssText = styles;

これらの方法を組み合わせることで、さまざまなスタイルを要素に追加することができます。必要に応じて、CSSクラスやstyleプロパティを動的に変更することもできます。