JavaScriptでCSSクラスを書く方法


  1. HTML要素を取得する: JavaScriptでCSSクラスを適用したいHTML要素を取得します。一般的には、document.getElementById()document.querySelector()を使用します。

  2. classListオブジェクトを使用してクラスを追加する: 取得したHTML要素のclassListプロパティを使用して、クラスを追加します。以下は例です。

const element = document.getElementById('exampleElement');
element.classList.add('exampleClass');

上記の例では、exampleElementというIDを持つHTML要素にexampleClassというクラスを追加しています。

  1. classListオブジェクトを使用してクラスを削除する: クラスを削除するには、element.classList.remove()メソッドを使用します。以下は例です。
element.classList.remove('exampleClass');

上記の例では、exampleClassというクラスがexampleElementから削除されています。

  1. classListオブジェクトを使用してクラスの存在を確認する: クラスが要素に既に存在するかどうかを確認するには、element.classList.contains()メソッドを使用します。以下は例です。
if (element.classList.contains('exampleClass')) {
  // クラスが存在する場合の処理
} else {
  // クラスが存在しない場合の処理
}

上記の例では、exampleClassexampleElementに存在するかどうかを確認しています。

これらのステップを参考にして、JavaScriptを使用してCSSクラスを操作することができます。これにより、動的な要素のスタイル変更やアニメーションなどが可能になります。

このような方法でJavaScriptでCSSクラスを書くことができます。以上が回答の内容です。