In diesem Beitrag wird erläutert, wie ein div-Container in JavaScript und jQuery ausgeblendet wird.
1. Verwendung von jQuery
Der gebräuchlichste Ansatz zum Ausblenden eines Elements in jQuery ist die Verwendung von .hide() Methode. Es funktioniert, indem man die display CSS-Eigenschaft zu none. Jetzt wird das Dokument so gerendert, als wäre das Element nicht vorhanden.
|
1 2 3 |
$(document).ready(function() { $('#container').hide(); }); |
Alternativ können Sie die direkt einstellen display CSS-Eigenschaft zu none durch Anruf .css("display", "none").
|
1 2 3 |
$(document).ready(function() { $('#container').css('display', 'none'); }); |
Wenn Sie den Platz beibehalten möchten, den das Element innerhalb des Dokuments einnimmt, legen Sie die visibility Eigentum zu hidden stattdessen.
|
1 2 3 |
$(document).ready(function() { $('#container').css('visibility', 'hidden'); }); |
Ein weiterer Ansatz ist die Verwendung von .fadeOut() Methode zum Festlegen der display Stileigenschaft zu none. Sie können eine weitere Verzögerung mit hinzufügen .delay() Methode.
|
1 2 3 |
$(document).ready(function() { $('#container').delay(1000).fadeOut('fast'); }); |
Wie .fadeOut() Methode können Sie die verwenden .slideUp() Methode zum Festlegen der display Stileigenschaft zu none.
|
1 2 3 |
$(document).ready(function() { $('#container').slideUp(); }); |
2. Verwendung von JavaScript
In einfachem JavaScript können Sie das CSS festlegen display Eigentum zu none, Wie nachfolgend dargestellt:
|
1 |
document.getElementById('container').style.display = "none"; |
Das display -Eigenschaft verbirgt das Element und entfernt es auch aus dem DOM. Um das Layout des Dokuments nicht zu ändern, können Sie es festlegen visibility zu hidden stattdessen.
|
1 |
document.getElementById('container').style.visibility = "hidden"; |
Das ist alles über das Verstecken eines div-Containers in JavaScript und jQuery.