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
Freigeben: 2024-12-09 16:09:11
Original
384 Leute haben es durchsucht

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:

1

2

3

4

5

// Hide an element

element.style.display = 'none';

 

// Show an element

element.style.display = 'block';

Nach dem Login kopieren

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:

1

2

3

4

5

// Hide an element

element.style.visibility = 'hidden';

 

// Show an element

element.style.visibility = 'visible';

Nach dem Login kopieren

Umgang mit Elementsammlungen

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

1

2

3

4

5

function hide(elements) {

  for (var i = 0; i < elements.length; i++) {

    elements[i].style.display = 'none';

  }

}

Nach dem Login kopieren

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:

1

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

Nach dem Login kopieren

durch diese:

1

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

Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage