Wie kann JavaScript HTML-Elemente dynamisch ein- und ausblenden?

Elemente dynamisch mit JavaScript ausblenden

Angenommen, Sie haben eine Schaltfläche, mit der Benutzer ein Textelement bearbeiten können. Nachdem Sie auf die Schaltfläche geklickt haben, möchten Sie möglicherweise, dass die Schaltfläche verschwindet und das Textelement durch einen Textbereich zum Bearbeiten ersetzt wird. So können Sie dies mit JavaScript erreichen:

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';
}

Im bereitgestellten HTML-Snippet können Sie es folgendermaßen ändern:

<td class="post">

    <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
    <span><p>Wenn Sie auf den Link „Bearbeiten“ klicken, wird die Folgende Aktionen werden ausgeführt:</p>
<ul>
<li>Der verborgene Bereich „answer1“, der den Textbereich enthält, wird sichtbar.</li>
<li>Der Bereich „text1“, der den Lorem-Ipsum-Text enthält, ist ausgeblendet.</li>
<li>Der Link „Bearbeiten“ selbst wird unsichtbar.</li>
</ul></span>
</td>

Das obige ist der detaillierte Inhalt vonWie kann JavaScript HTML-Elemente dynamisch ein- und ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!