純粋な JavaScript による要素クラスの切り替え: 総合ガイド

はじめに

JavaScript では、要素クラスの制御が動的な Web 開発にとって重要です。一般的なタスクの 1 つは、クラスを切り替えて要素の外観や機能を変更することです。 jQuery はこのタスクを簡単にしますが、純粋な JavaScript を使用してこのタスクを実行する方法を理解することが重要です。

jQuery ソリューションと JavaScript の同等物

提供されている jQuery コードは、toggleClass() メソッドを使用して、指定された要素の menu-hidden クラスと hidden-phone クラス。

JavaScript 相当物:

• オプション 1 (classList.toggle):

最新のブラウザは classList.toggle() メソッドをサポートしています。例:

var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

• オプション 2 (従来のブラウザ用の classList.js):

古いブラウザclasslist.js ライブラリを使用して classList.toggle() を実装できます。例:

var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');

ID の使用に関する明確化

補足として、JavaScript コードでは ID を使用しないことをお勧めします。 ID は JavaScript ウィンドウ オブジェクトにリークするグローバルであり、予期しない動作やメモリ リークの可能性があります。代わりに、よりモジュール化されたカプセル化されたコードにはクラスを使用してください。