Pure JavaScript を使用して要素クラスを動的に切り替える方法?

純粋な JavaScript での要素クラスの切り替え: 簡易ガイド

要素クラスを動的に変更するタスクは、純粋な JavaScript を使用して実現できます。このプロセスにより、jQuery などの追加のフレームワークやライブラリが不要になります。

jQuery 変換:

次の jQuery スニペットを考えてみましょう:

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

純粋な JavaScript の実装:

純粋な JavaScript で同じ機能を実現するには、classList.toggle() メソッドが一般的に使用されます。この方法は、ほとんどの最新のブラウザでサポートされています。

var menu = document.querySelector('.menu');  // Using a class instead of an ID
menu.classList.toggle('hidden-phone');

注: JavaScript で ID を使用すると、グローバルな漏洩が発生する可能性があるため、通常はお勧めできません。

古いブラウザ用の ClassList.js:

classList.toggle() をネイティブにサポートしていないブラウザの場合は、classlist.js ポリフィルを組み込むことができます。

var menu = document.querySelector('.menu');
menu.classList.toggle('hidden-phone');

この実装は確実に実行されます。外部ライブラリやフレームワークを必要とせずにクラスを切り替え、純粋な JavaScript での簡潔で効率的なアプローチを提供します。

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