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

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

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Erweitern Sie das Snippet

— 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