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

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

Patricia Arquette
リリース: 2024-12-18 01:20:10
オリジナル
973 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート