ホームページ >ウェブフロントエンド >CSSチュートリアル >ボタンをクリックして 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 サイトの他の関連記事を参照してください。