Heim > Web-Frontend > js-Tutorial > So zeigen und verbergen Sie Divs in Javascript

So zeigen und verbergen Sie Divs in Javascript

青灯夜游
Freigeben: 2021-04-19 11:15:13
Original
2832 Leute haben es durchsucht

Methode: 1. Verwenden Sie das Anzeigeattribut, die Syntax „div object.style.display="none|block"“ 2. Verwenden Sie das Sichtbarkeitsattribut, die Syntax „div object.style.visibility="hidden|visible"; ".

So zeigen und verbergen Sie Divs in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

<div id="demo">AAA</div>
Nach dem Login kopieren

Es gibt zwei Möglichkeiten, Divs in JS auszublenden und anzuzeigen:

Methode 1: Den belegten Seitenbereich nach dem Ausblenden freigeben

Durch Festlegen des Anzeigeattributs können Sie den belegten Seitenbereich nach dem Ausblenden freigeben das div.

style="display: none;"style="display: none;"

document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="block";//显示
Nach dem Login kopieren

方式2:隐藏后仍占有页面空间,显示空白

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示
Nach dem Login kopieren

注意:

使用第二方式更人性化,但是,用div.style.display="none"rrreee

Methode 2: Nach dem Ausblenden belegt es immer noch den Seitenbereich und wird leer angezeigt

Die Sichtbarkeit des div kann das steuern Anzeigen und Ausblenden des Div, aber die Seite wird nach dem Ausblenden leer angezeigt.🎜🎜style="visibility: none;"🎜rrreee🎜Hinweis:
🎜🎜Die Verwendung der zweiten Methode ist benutzerfreundlicher -freundlich, jedoch führt die Verwendung von div.style.display ="none"Hide dazu, dass Dinge innerhalb des Div in den Ruhezustand versetzt werden und Ereignisse darin nicht reagieren. 🎜🎜【Empfohlenes Lernen: 🎜Javascript-Tutorial für Fortgeschrittene🎜】🎜

Das obige ist der detaillierte Inhalt vonSo zeigen und verbergen Sie Divs in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage