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

JavaScript で要素を非表示にする方法

Web ページ上の要素を非表示にすると、ユーザー エクスペリエンスが向上し、サイトの視覚的な魅力が向上します。 JavaScript でこれを行う効果的な方法の 1 つは、表示スタイル プロパティを利用することです。

操作後の要素の非表示

「編集」リンクがあるシナリオを考えてみましょう。このリンクをクリックすると、編集可能なテキストエリアを表示します。さらに、ユーザーが編集を開始した後は、プレースホルダー テキスト (「Lorem ipsum」) を非表示にしたいとします。これは、次の JavaScript 関数を変更することで実現できます。

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 は、表示したい要素の ID です (例:
• text は、非表示にする要素の ID です (例: "Lorem ipsum") text).
• btn は、アクションをトリガーした要素への参照です (例: [編集] リンク)。

したがって、[編集] リンクがクリックされると、 JavaScript は対応するテキストエリアを見つけて表示します。また、プレースホルダー テキストを検索して非表示にします。最後に、編集操作の繰り返しを防ぐために、「編集」リンク自体を非表示にします。

サンプル コード

このソリューションを実装するには、以下の変更された HTML コードを使用できます。

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

この例では、ユーザーが「編集」リンクをクリックしたときにプレースホルダー テキストと「編集」リンクを非表示にする方法を示します。その結果、Web ページにクリーンで直感的な編集インターフェイスが作成されます。

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