ホームページ >ウェブフロントエンド >CSSチュートリアル >ボタンをクリックして DIV 要素を表示および非表示にする方法

ボタンをクリックして DIV 要素を表示および非表示にする方法

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-18 01:20:10967ブラウズ

How to Show and Hide a DIV Element with a Button Click?

ボタンを使用して DIV の表示/非表示を切り替える方法?

多くの Web アプリケーションでは、ページ上の要素 (div など) を表示または非表示にする機能が必要です。これは JavaScript を使用して簡単に実現できます。 ボタンを使用して div の表示/非表示を切り替える方法は次のとおりです:

純粋な JavaScript:

このアプローチでは、div 要素の style.display プロパティを使用します。ボタンがクリックされると、クリック イベント リスナーがトリガーされ、div が現在表示されているかどうか (つまり、style.display が 'none' ではないか) がチェックされます。存在する場合、style.display を「none」に設定することで div が非表示になります。それ以外の場合は、style.display を 'block' に設定すると表示されます。

var button = document.getElementById('button'); // Assumes element with>

jQuery:

jQuery は、要素の可視性を切り替えるためのより簡単な方法を提供します。 。 toggle() メソッドは、選択した要素の表示/非表示を切り替えます。クリックされると、クリック イベント リスナーは、ID が「newpost」の div で toggle() メソッドをトリガーします。

$("#button").click(function() { 
    // assumes element with>

以上がボタンをクリックして DIV 要素を表示および非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。