Wie kann ich HTML-Elemente mithilfe der JavaScript-Eigenschaft „display' ein- und ausblenden?

Elemente mit JavaScript ein- und ausblenden

In der Webentwicklung ist die Kontrolle der Sichtbarkeit von Seitenelementen eine häufige Anforderung. In diesem Artikel erfahren Sie, wie Sie Elemente in JavaScript mithilfe der Anzeigestileigenschaft ausblenden und anzeigen.

Um ein Element auszublenden, setzen wir seine Anzeigeeigenschaft auf „Keine“. Dadurch wird das Element aus dem visuellen Fluss der Seite entfernt und für Benutzer unsichtbar. Um ein ausgeblendetes Element anzuzeigen, setzen wir einfach seine Anzeigeeigenschaft auf einen sichtbaren Wert zurück, z. B. Block oder Inline.

Beispielszenario: Ein- und Ausblenden der Bearbeitungsfunktionalität

Lassen Sie uns eine einfache HTML-Struktur verbessern mit erweiterter Funktionalität:

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

Dieser Code zeigt einen „Bearbeiten“-Link und einen ausgeblendeten Textbereich an. Wenn Sie auf den Link klicken, sollte der Textbereich angezeigt und der Text „Lorem ipsum“ ausgeblendet werden.

Lösung

Wir können die showStuff-Funktion ändern, um sowohl das Ausblenden als auch das Anzeigen von Elementen zu verarbeiten:

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

Hier:

• Zeigen Sie das Zielelement (ID) an, indem Sie seine Anzeigeeigenschaft auf setzen blockieren.
• Verstecken Sie den Text „Lorem ipsum“ (text), indem Sie seine Anzeigeeigenschaft auf „Keine“ setzen.
• Verstecken Sie den Link „Bearbeiten“ (btn), indem Sie seine Anzeigeeigenschaft auf „Keine“ setzen.

Modifiziertes Beispiel

Integration dieser Änderungen in die HTML:

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

Wenn auf den Link „Bearbeiten“ geklickt wird, wird die Funktion showStuff ausgelöst, die den Textbereich anzeigt, den Text „Lorem ipsum“ und den Link selbst ausblendet.

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