Heim >Web-Frontend >js-Tutorial >Wie kann ich DIV-Elemente mit JavaScript ein- und ausblenden?

Wie kann ich DIV-Elemente mit JavaScript ein- und ausblenden?

Barbara Streisand
Barbara StreisandOriginal
2024-12-09 16:09:11352Durchsuche

How Can I Show and Hide DIV Elements Using JavaScript?

„div“ mithilfe von JavaScript anzeigen/ausblenden

Beim Erstellen einer Website ist es oft wünschenswert, die Sichtbarkeit von Elementen umzuschalten. Dies kann mit JavaScript erreicht werden. Wenn Sie jedoch auf Probleme mit Ihrem Code stoßen, ziehen Sie diese möglichen Lösungen in Betracht:

Manipulieren der Eigenschaft „display“

Um ein Element anzuzeigen oder auszublenden, legen Sie fest style-Eigenschaft 'display' auf den gewünschten Wert:

// Hide an element
element.style.display = 'none';

// Show an element
element.style.display = 'block';

Manipulieren der 'Sichtbarkeit' Eigenschaft

Wenn Sie möchten, dass ein Element auch im ausgeblendeten Zustand weiterhin Platz einnimmt, passen Sie stattdessen die Eigenschaft „Sichtbarkeit“ an:

// Hide an element
element.style.visibility = 'hidden';

// Show an element
element.style.visibility = 'visible';

Umgang mit Elementsammlungen

Um mehrere Elemente auszublenden, iterieren Sie und stellen Sie die „Anzeige“ jedes Elements auf ein 'none':

function hide(elements) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
}

Anwenden des Fixes auf Ihren Code

In Ihrem Code funktioniert die zweite Funktion nicht, weil sie versucht, div2 durch div1 zu ersetzen Inhalt. Um div2 anzuzeigen, ersetzen Sie diese Zeile in der zweiten Funktion:

document.getElementById('replace_target').innerHTML = document.getElementById('source').innerHTML;

durch diese:

document.getElementById('replace_target').innerHTML = document.getElementById('target').innerHTML;

Durch Anpassen dieser Eigenschaften und Anwenden dieser Techniken sollten Sie nun in der Lage sein, das umzuschalten Sichtbarkeit Ihrer Divs nach Wunsch.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn