クラスを JavaScript で切り替える

1. JavaScript のマウスホバーで HTML 要素のクラスを切り替える
2. JavaScript でのマウスクリックでの HTML 要素のクラスの切り替え

JavaScript を使用して HTML 要素のクラスを切り替えるメソッドを紹介します。

JavaScript のマウスホバーで HTML 要素のクラスを切り替える

クラスを切り替えると、HTML 要素にクラス名が割り当てられていない場合は、クラス名を動的に設定できます。特定のクラスがすでに存在する場合は、動的に削除できます。コンピューティングでは、マウスオーバーは、ユーザーが通常はマウスを使用してトリガー領域上にポインターを移動またはホバーしたときにアクティブになるグラフィカルコントロール要素です。

切り替え機能は JavaScript で導入されました。JavaScript ファイルでは、ドキュメント内の指定された CSS セレクターに一致する最初の要素を返す querySelector() メソッドを使用します。以下のファイルでは、#container id が <div> 要素に関連付けられています。したがって、変数コンテナに <div> 要素を取得しました。マウスのホバーでクラスを切り替えるために必要な機能を実現するには、イベントハンドラーを HTML ドキュメントにアタッチする addEventListener() メソッドを使用する必要があります。そして、私たちが使用した実際のイベントは、mouseenter イベントと mouseleave イベントです。mouseenter イベントは、マウスポインタが要素に移動したときに発生します。mouseleave イベントは、マウスポインタが要素の外に移動したときに発生します。

mouseenter イベントが発生すると、classList プロパティ、add() および remove() メソッドを使用します。マウスポインタを <div> 要素クラスの上に移動すると、最初の div 要素が remove() メソッドによって削除され、クラス second が <div> 要素に追加されます。同様に、マウスポインタを移動すると、クラス first が追加され、クラス second が削除されます。したがって、トグルは、マウスが <div> 要素にカーソルを合わせたときに実行されます。

CSS ファイル styles.css と JavaScript ファイル index.js へのリンクがそれぞれ <link> と <script></script> タグを使用して HTML ドキュメントで指定されている HTML ドキュメントがあります。クラスを切り替える <div> 要素の上にマウスポインタを置く機能を実現したいと考えています。JavaScript を使用してこれを行います。HTML では、id コンテナによって一意に識別される <div> 要素があり、クラス first はすでに同じ要素に関連付けられています。

CSS では、クラスセレクターのプロパティと値を定義します。CSS を単純にし、クラス first にはプロパティ background があり、その値は緑色です。同様に、クラス second にはプロパティ background と値 orange があります。

サンプルコード：

<div id="container" class="first">
  <h1>
    JavaScript is Easy
  </h1>
</div>

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function() {
  this.classList.remove('first');
  this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
  this.classList.add('first');
  this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

JavaScript でのマウスクリックでの HTML 要素のクラスの切り替え

上記のメソッドのイベント上でマウスを使用した場合と同様に、マウスクリックで JavaScript を使用して HTML クラスを切り替えることができます。たとえば、ID が p の <p> タグを使用して段落を作成します。タグの中にテキストを書いてください。次に、onclick 属性を使用して <button> タグを作成します。onclick 属性を使用して関数 myFunc() を呼び出します。タグの間にボタンというテキストを書き込みます。

CSS で、クラスセレクターを使用して paragraphClass を選択し、font-size を 30px に、color を red に指定します。JavaScript で、myFunc() 関数を記述し、getElementById を使用して HTML の p ID を選択し、para 変数に格納します。変数を使用して、classList プロパティを呼び出してから、toggle() メソッドを呼び出します。toggle() メソッドのパラメーターとして paragraphClass クラスを記述します。

getElementById() メソッドを使用して、変数 para 内の p 要素を取得しました。classList プロパティを使用して、toggle() 関数を使用して HTML ドキュメントの <p> 要素を作成しました。下部をクリックして myFunc() を実行すると、CSS クラスセレクターparagraphClass のオンとオフが <p> 要素で切り替わります。したがって、切り替えはマウスの下部をクリックするだけで実行されます。

サンプルコード：

<p id="p">
        Click Button to toggle between classes
</p>
<button onclick="myFunc()">
        Button
</button>

      .paragraphClass {
            font-size: 30px;
            color: red;
        }

function myFunc() {
  var para = document.getElementById('p');
  para.classList.toggle('paragraphClass');
}