Pure JavaScript で要素クラスを切り替えるには?

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

はじめに

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

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

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

JavaScript の同等物:

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

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

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

• オプション 2 (レガシー ブラウザ用の classList.js):

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

<code class="javascript">var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');</code>

ID の使用の明確化

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

以上がPure JavaScript で要素クラスを切り替えるには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。