JavaScript はどのようにして HTML 要素を動的に隠したり表示したりできるのでしょうか?-jsチュートリアル-php.cn

JavaScript はどのようにして HTML 要素を動的に隠したり表示したりできるのでしょうか?

Linda Hamilton

リリース： 2024-12-15 21:02:29

オリジナル

664 人が閲覧しました

How Can JavaScript Dynamically Hide and Show HTML Elements?

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

ユーザーがテキスト要素を編集できるボタンがあるとします。ボタンをクリックした後、ボタンを非表示にし、テキスト要素を編集用のテキスト領域に置き換えることができます。 JavaScript を使用してこれを実現する方法は次のとおりです。

function showStuff(id, text, btn) {
    // Display the element with the given ID
    document.getElementById(id).style.display = 'block';

    // Hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';

    // Hide the link
    btn.style.display = 'none';
}

ログイン後にコピー

提供された HTML スニペットで、それを変更する方法は次のとおりです。

<td class="post">

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

ログイン後にコピー

[編集] リンクをクリックすると、次のアクションが発生します:

テキスト領域を含む非表示の「answer1」スパンは、次のようになります。
lorem ipsum テキストを含む「text1」スパンが非表示になります。
「編集」リンク自体が非表示になります。

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