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

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

.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>

Rozwiń fragment

— 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