ボタンをクリックして DIV 要素を表示または非表示にするにはどうすればよいですか?-CSSチュートリアル-php.cn

ボタンをクリックして DIV 要素を表示または非表示にするにはどうすればよいですか?

Dec 14, 2024 pm 12:34 PM

How Can I Show or Hide a DIV Element Using a Button Click?

ボタンで DIV の表示/非表示を切り替える方法

質問:

DIV を表示または非表示にするにはどうすればよいですか?ボタンがあるときクリックされましたか?

答え:

ボタンで DIV の表示/非表示を切り替えるには、JavaScript または jQuery を使用できます。

ピュアを使用するJavaScript:

ボタン要素への参照を取得します:
```
var button = document.getElementById('button');
```
ログイン後にコピー
表示/非表示を切り替える関数を定義します:
```
button.onclick = function() {
```
ログイン後にコピー
への参照を取得します。 DIV 要素:
```
var div = document.getElementById('newpost');
```
ログイン後にコピー
DIV が現在表示されているかどうかを確認します:
```
if (div.style.display !== 'none') {
```
ログイン後にコピー

表示/非表示を切り替えますそれに応じて:

    div.style.display = 'none'; // Hide
}
else {
    div.style.display = 'block'; // Show
}
};

ログイン後にコピー

jQuery の使用:

ボタンを選択し、クリックイベントハンドラーをバインドします:
```
$("#button").click(function() {
```
ログイン後にコピー
を選択してくださいDIV を選択し、その表示/非表示を切り替えます:
```
    $("#newpost").toggle();
});
```
ログイン後にコピー

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

このウェブサイトの声明

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