So machen Sie einen DIV mit JavaScript sichtbar und unsichtbar

113

Kannst du so etwas machen?

function showDiv()
{
    [DIV].visible = true;
    //or something
}
javascript html Neuron
quelle
1
Warum nicht einfach Jquery verwenden? .ausblenden() ?
Coderama
Würde ich das für den Namen des Div verwenden, also würde ich es tun, wenn der Div Test heißt test.hide()?
8
@ JackStone: Nein, das ist nur möglich, wenn Sie bereits die jQuery-Bibliothek verwenden. Einige Leute bewerben es einfach gerne bei jeder JavaScript-Frage. Auch wenn Sie es waren, .hide()wird die Sichtbarkeit nicht festgelegt. Hiermit wird die Anzeige eingestellt.
6
@am nicht ich bin du hast eindeutig nicht verstanden, dass jQuery wirklich großartig ist und alles macht. (Bildquelle)
Pekka
8
Für so etwas wie dieses eine gute Antwort sowohl eine einfache JS - Lösung und eine , welche die enthalten sollte Vorteil der Verwendung einer Bibliothek - in diesem Fall nicht zu behandeln, die Inline - vs - Block bei der Verwendung displayeines Elements zu zeigen.
ThiefMaster

Antworten:

139

Wenn [DIV] ein Element ist, dann 

[DIV].style.visibility='visible'

ODER

[DIV].style.visibility='hidden'
Ron Tornambe
quelle
16
visibilityhat den Nebeneffekt, dass der vom Element belegte Platz reserviert bleibt. Das kann oder kann nicht sein, was das OP will
Pekka
1
An der Stelle, an der [DIV] steht, würde ich den Namen meines Div eingeben, oder?
20
Nein, verwenden Sie document.getElementById('id-of-the-div')anstelle von[DIV]
ThiefMaster
@ JackStone: Es hängt davon ab, was du mit dem "Namen" deines Divs meinst. Wenn es sich um eine Variable handelt, die auf das div verweist, dann ja.
1
Also, wenn mein Div Name wäre testdiv, wäre es document.getElementById('testdiv').style.visibility = 'hidden';?
123

Angenommen, Sie verwenden keine Bibliothek wie jQuery.

Wenn Sie noch keinen Verweis auf das DOM-Element haben, verwenden Sie einen var elem = document.getElementById('id');

Anschließend können Sie eine beliebige CSS-Eigenschaft dieses Elements festlegen. Zum Ein- / Ausblenden können Sie zwei Eigenschaften verwenden: displayund visibility, die leicht unterschiedliche Auswirkungen haben:

Das Anpassen style.displaysieht so aus, als ob das Element überhaupt nicht vorhanden ist ("entfernt").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

oder style.visibilitywird das div tatsächlich noch da sein lassen, aber "alles leer" oder "alles weiß" sein

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Wenn Sie jQuery verwenden, können Sie dies noch einfacher tun, solange Sie die displayEigenschaft festlegen möchten :

$(elem).hide();
$(elem).show();

Es wird automatisch der entsprechende displayWert verwendet. Sie müssen sich nicht um den Elementtyp (Inline oder Block) kümmern. Darüber hinaus elemkann nicht nur ein DOM-Element, sondern auch ein Selektor wie sein#id oder .classoder etwas anderes, das für CSS3 (und mehr!) Gültig ist.

DiebMaster
quelle
Ich bevorzuge deine Antwort, aber ich denke, es gibt eine kleine Korrektur, die du verwenden musst. Elem.style.display = 'none';
Saumil
Manchmal ist es akzeptabel , eine leere Zeichenfolge zuzuweisen, um ein Element anzuzeigen .
Basilevs
28

Sie können visibilityoder displaymüssen Änderungen am div.styleObjekt und nicht am divObjekt selbst vornehmen .

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';
zellio
quelle
div.style.visibility = falsefunktioniert bei mir in Chrome nicht. Und das trueTeil scheint eher zufällig zu funktionieren, weil es das Eigentum aufhebt (allerdings nicht meine Gegenstimme)
Pekka
Weder displaynoch visibilitysind boolesche Eigenschaften. Außerdem noneund blockmüssen zitiert werden, da es sich um Strings handelt.
ThiefMaster
falsche Werte für die Etiketten. Diese funktionieren jetzt und nein, ich werde das nicht fummeln, es ist zu simpel.
Zellio
4

Sie können die DOM-Funktionen setAttribute und removeAttribute verwenden. Im folgenden Link finden Sie ein Beispiel für deren Verwendung.

Funktionen setAttribute und removeAttribute

Ein kurzer Überblick:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");
jarh1992
quelle
2
Können Sie Ihre Antwort verbessern? Mit Beispiel und Erklärungen.
Gaël Barbin
1

Sie können verwenden, opacitywas ähnlich ist, visibility aber den Übergang glätten und andere Parameter wie die Höhe steuern kann (der Einfachheit halber habe ich die js-Logik direkt in HTML eingefügt - tun Sie dies nicht im Produktionscode).

Code-Snippet anzeigen

Kamil Kiełczewski
quelle
0

Verwenden Sie das Attribut 'hidden' des DOM-Elements:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}
Andrey Hohutkin
quelle
0

Mit CSS unsichtbar machen

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Mit Javascript sichtbar machen

document.getElementById('div_id').style.visibility = 'visible';
Dilip Kumar Choudhary
quelle