JavaScript の「display」プロパティを使用して HTML 要素を非表示および表示するにはどうすればよいですか?

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

Web 開発では、ページ要素の可視性を制御することが一般的な要件です。この記事では、JavaScript で表示スタイル プロパティを使用して要素を非表示にしたり表示したりする方法について説明します。

要素を非表示にするには、その表示プロパティを none に設定します。これにより、ページの視覚的なフローから要素が削除され、ユーザーには見えなくなります。非表示の要素を表示するには、その表示プロパティを block や inline などの表示値に戻すだけです。

シナリオ例: 編集機能の非表示と表示

単純な HTML 構造を強化してみましょう強化された機能:

<td>
  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span>

このコードは、「編集」リンクと非表示のテキスト領域を表示します。リンクをクリックすると、テキスト領域が表示され、「Lorem ipsum」テキストが非表示になります。

解決策

要素の非表示と表示の両方を処理するように showStuff 関数を変更できます。

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

ここでは、

• 表示プロパティを設定してターゲット要素 (id) を表示します。
• 表示プロパティを none に設定して、「Lorem ipsum」テキスト (テキスト) を非表示にします。
• 表示プロパティを none に設定して、「編集」リンク (btn) を非表示にします。

修正例

これらの変更をHTML:

<td>
  <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
  <span>

「編集」リンクをクリックすると、showStuff 関数がトリガーされ、テキスト領域が表示され、「Lorem ipsum」テキストが非表示になり、リンク自体が非表示になります。

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