ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用して DIV 要素を表示および非表示にするにはどうすればよいですか?

JavaScript を使用して DIV 要素を表示および非表示にするにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-09 16:09:11
オリジナル
382 人が閲覧しました

How Can I Show and Hide DIV Elements Using JavaScript?

JavaScript を使用した 'div' の表示/非表示

Web サイトを構築する場合、要素の表示/非表示を切り替えることが望ましいことがよくあります。これは JavaScript を使用して実現できます。ただし、コードで問題が発生した場合は、次の考えられる解決策を検討してください。

「display」プロパティの操作

要素を表示または非表示にするには、スタイル プロパティ 'display' を目的の値に設定します:

// Hide an element
element.style.display = 'none';

// Show an element
element.style.display = 'block';
ログイン後にコピー

'visibility' プロパティ

要素が非表示になっている間もスペースを占有したい場合は、代わりに 'visibility' プロパティを調整します:

// Hide an element
element.style.visibility = 'hidden';

// Show an element
element.style.visibility = 'visible';
ログイン後にコピー

要素のコレクションの処理

複数の要素を非表示にするには、繰り返して各要素の「表示」を次のように設定します。 'none':

function hide(elements) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
}
ログイン後にコピー

コードへの修正の適用

コードでは、div2 を div1 の関数に置き換えようとしているため、2 番目の関数が機能しません。コンテンツ。 div2 を表示するには、2 番目の関数のこの行を次のように置き換えます:

document.getElementById('replace_target').innerHTML = document.getElementById('source').innerHTML;
ログイン後にコピー

document.getElementById('replace_target').innerHTML = document.getElementById('target').innerHTML;
ログイン後にコピー

これらのプロパティを調整し、これらのテクニックを適用することで、必要に応じて div を可視化します。

以上がJavaScript を使用して DIV 要素を表示および非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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