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

JavaScript を使用した 'div' 要素の表示と非表示

2 つの 'div' 要素の表示/非表示を切り替えるシナリオを考えてみましょうウェブページ上で。要素の表示と非表示をトリガーするボタンがあります。ただし、最初の関数だけがそのターゲット 'div' を非表示にし、2 番目の関数は非表示にしないという問題が発生しています。

JavaScript の要素の可視性制御

非表示にするか、またはJavaScript で要素を表示すると、そのスタイル プロパティを操作できます。表示制御には、2 つのオプションがあります:

• Display: 要素の可視性を設定します。

  • 'none': Hide the element.
  • 'block': 要素をスタンドアロンとして表示しますblock.
  • 'inline': 周囲のテキストと並んで要素を表示します。
  • 'inline-block': 'inline' と似ていますが、要素に幅と高さを指定できます。

• Visibility: 要素の可視性を制御しますスペースを維持しながら。

  • 'hidden': 要素を非表示にしますが、スペースは保持します。
  • 'visible': 要素を表示します。

コレクションを非表示にする要素

複数の要素を一度に非表示にしたい場合は、関数を使用して要素を反復処理し、表示プロパティを「none」に設定できます:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

使用例:

hide(document.querySelectorAll('.target')); // Hides all elements with the 'target' class.
hide(document.querySelector('.target')); // Hides the first element with the 'target' class.
hide(document.getElementById('target')); // Hides the element with the ID 'target'.

これらのテクニックを利用することで、効果的に「div」を表示または非表示にすることができます要素と Web ページ上のその他の HTML 要素。

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