Jak uczynić DIV widocznym i niewidocznym za pomocą JavaScript

113

Czy możesz zrobić coś takiego

function showDiv()
{
    [DIV].visible = true;
    //or something
}
javascript html Neuron
źródło
1
Dlaczego po prostu nie użyć Jquery? .ukryć() ?
coderama
Czy użyłbym tego jako nazwy elementu div, więc jeśli element div miałby nazwę test, zrobiłbym to test.hide()?
8
@JackStone: Nie, to tylko wtedy, gdy używasz już biblioteki jQuery. Niektórzy po prostu lubią go promować w każdym pytaniu JavaScript. Nawet jeśli byłeś, .hide()nie ustawia widoczności. Ustawia wyświetlanie.
6
@am nie ja jestem Wyraźnie nie rozumiesz, że jQuery jest naprawdę świetny i robi wszystko. (Źródło obrazu)
Pekka
8
W przypadku czegoś takiego dobra odpowiedź powinna zawierać zarówno zwykłe rozwiązanie JS, jak i takie, które pokazuje zalety korzystania z biblioteki - w tym przypadku nie ma konieczności zajmowania się inline vs block podczas używania displaydo pokazania elementu.
ThiefMaster

Odpowiedzi:

139

jeśli [DIV] jest elementem to 

[DIV].style.visibility='visible'

LUB

[DIV].style.visibility='hidden'
ron tornambe
źródło
16
visibilityma ten efekt uboczny, że miejsce zajmowane przez element pozostaje zarezerwowane. To może, ale nie musi, być tym, czego chce PO
Pekka,
1
W miejscu, w którym jest napisane [DIV], wpisałbym nazwę mojego div, prawda?
20
Nie, użyj document.getElementById('id-of-the-div')zamiast[DIV]
ThiefMaster
@JackStone: To zależy od tego, co masz na myśli przez „nazwę” swojego div. Jeśli jest to zmienna, która odwołuje się do elementu div, to tak.
1
Więc gdyby mój div był nazwany testdiv, to byłoby document.getElementById('testdiv').style.visibility = 'hidden';?
124

Załóżmy, że nie używasz biblioteki, takiej jak jQuery.

Jeśli nie masz jeszcze odniesienia do elementu DOM, zdobądź go za pomocą var elem = document.getElementById('id');

Następnie możesz ustawić dowolną właściwość CSS tego elementu. Aby pokazać / ukryć, możesz użyć dwóch właściwości: displayi visibility, które mają nieco inne efekty:

Dopasowanie style.displaybędzie wyglądać tak, jakby element w ogóle nie był obecny („usunięty”).

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)

lub style.visibilityfaktycznie sprawi, że element div nadal tam będzie, ale będzie „wszystkie puste” lub „wszystkie białe”

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

Jeśli korzystasz z jQuery, możesz to zrobić jeszcze łatwiej, o ile chcesz ustawić displaywłaściwość:

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

Automatycznie użyje odpowiedniej displaywartości; nie musisz przejmować się typem elementu (inline lub block). Dodatkowo, elemnie może być tylko elementem DOM ale również selektor takich jak #idlub .classczy cokolwiek innego, co jest ważne CSS3 (i więcej!).

ThiefMaster
źródło
Wolę twoją odpowiedź, ale myślę, że jest mała poprawka, którą musisz użyć elem.style.display = 'none';
Saumil
Czasami dopuszczalne jest przypisanie pustego łańcucha do pokazania elementu .
Basilevs
29

Możesz użyć visibilitylub, displayale musisz wprowadzić zmiany do div.styleobiektu, a nie do divsamego obiektu.

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
źródło
div.style.visibility = falsenie działa u mnie w Chrome. A trueczęść wydaje się działać bardziej przypadkowo, ponieważ odblokowuje nieruchomość (chociaż nie mój negatywny głos)
Pekka,
Ani displaynie visibilitysą to właściwości logiczne. Poza tym nonei blocknależy je cytować, ponieważ są to ciągi znaków ...
ThiefMaster
nieprawidłowe wartości etykiet. Te działają teraz i nie, nie zamierzam się tym bawić, to zbyt uproszczone.
zellio
4

Możesz użyć funkcji DOM: setAttribute i removeAttribute. W poniższym linku masz przykład, jak ich używać.

Funkcje setAttribute i removeAttribute

Szybki podgląd:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");
jarh1992
źródło
2
Czy możesz wzmocnić swoją odpowiedź? Z przykładem i wyjaśnieniami.
Gaël Barbin
1

Możesz użyć tego, opacityco jest podobne do, visibility ale pozwala na płynne przejście i kontrolowanie innych parametrów, takich jak wysokość (dla uproszczenia fragmentu kodu umieszczam logikę js bezpośrednio w html - nie rób tego w kodzie produkcyjnym)

Pokaż fragment kodu

Kamil Kiełczewski
źródło
0

Użyj atrybutu „hidden” elementu DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}
Andrey Hohutkin
źródło
0

Uczyń niewidzialnym za pomocą CSS

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

Uczyń widocznym za pomocą JavaScript

document.getElementById('div_id').style.visibility = 'visible';
Dilip Kumar Choudhary
źródło