Come rendere un DIV visibile e invisibile con JavaScript

113

Puoi fare qualcosa di simile

function showDiv()
{
    [DIV].visible = true;
    //or something
}

javascript html

— Neurone
fonte

1

Perché non usare solo Jquery? .hide ()?

— coderama

Lo userei per il nome del div, quindi se il div fosse denominato test, lo farei test.hide()?

8

@ JackStone: No, è solo se stai già utilizzando la libreria jQuery. Ad alcune persone piace semplicemente promuoverlo su ogni domanda JavaScript. Anche se lo fossi, .hide()non imposta la visibilità. Imposta la visualizzazione.

6

@am not I am hai chiaramente mancato di capire che jQuery è davvero eccezionale e fa tutte le cose. (Fonte immagine)

— Pekka

8

Per qualcosa di simile una buona risposta dovrebbe contenere sia una semplice soluzione JS che una che mostri il vantaggio dell'utilizzo di una libreria - in questo caso, non avere a che fare con inline vs block quando si usa displayper mostrare un elemento.

— ThiefMaster

139

se [DIV] è un elemento allora

[DIV].style.visibility='visible'

O

[DIV].style.visibility='hidden'

— ron tornambe
fonte

16

visibilityha l'effetto collaterale che lo spazio occupato dall'elemento rimane riservato. Questo può o non può essere ciò che vuole l'OP

— Pekka

1

Nel punto in cui si dice [DIV], vorrei digitare il nome del mio div, giusto?

20

No, usa al document.getElementById('id-of-the-div')posto di[DIV]

— ThiefMaster

@JackStone: dipende da cosa intendi con il "nome" del tuo div. Se è una variabile che fa riferimento al div, allora sì.

1

Quindi se il mio div fosse il nome testdiv, sarebbe document.getElementById('testdiv').style.visibility = 'hidden';?

124

Supponiamo che tu non utilizzi una libreria come jQuery.

Se non si dispone già di un riferimento all'elemento DOM, procurarsene uno utilizzando var elem = document.getElementById('id');

Quindi puoi impostare qualsiasi proprietà CSS di quell'elemento. Per mostrare / nascondere, puoi usare due proprietà: displaye visibility, che hanno effetti leggermente diversi:

La regolazione style.displaysembrerà come se l'elemento non fosse affatto presente ("rimosso").

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)

o style.visibilityeffettivamente renderà il div ancora lì, ma sarà "tutto vuoto" o "tutto bianco"

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

Se stai usando jQuery, puoi farlo ancora più facilmente purché tu voglia impostare la displayproprietà:

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

Utilizzerà automaticamente il displayvalore appropriato ; non devi preoccuparti del tipo di elemento (inline o block). Inoltre, elemnon può essere solo un elemento DOM ma anche un selettore come #ido .classo qualsiasi altra cosa che sia CSS3 valida (e altro!).

— ThiefMaster
fonte

Preferisco la tua risposta ma immagino che ci sia una piccola correzione che devi usare elem.style.display = 'none';

— Saumil

A volte è accettabile assegnare una stringa vuota per mostrare un elemento .

— Basilevs

29

Puoi usare visibilityo displayma devi applicare le modifiche div.styleall'oggetto e non divall'oggetto stesso.

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
fonte

div.style.visibility = falsenon funziona per me in Chrome. E la trueparte sembra funzionare di più per caso perché disattiva la proprietà (non è il mio voto negativo)

— Pekka

Né displayné visibilitysono proprietà booleane. Oltre a ciò, nonee blockdevono essere citati poiché sono stringhe ..

— ThiefMaster

valori errati per le etichette. Quelle funzionano ora e no, non ho intenzione di giocherellare, è troppo semplicistico.

— zellio

4

È possibile utilizzare le funzioni DOM: setAttribute e removeAttribute. Nel seguente link hai un esempio di come usarli.

funzioni setAttribute e removeAttribute

Una rapida panoramica:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

— jarh1992
fonte

2

Puoi migliorare la tua risposta? Con esempio e spiegazioni.

— Gaël Barbin

1

Puoi usare opacityche è simile a visibility ma consente di regolare la transizione e controllare altri parametri come l'altezza (per semplicità di snippet metto la logica js in html direttamente - non farlo nel codice di produzione)

Mostra snippet di codice

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

Espandi lo snippet

— Kamil Kiełczewski
fonte

0

Utilizza l'attributo "nascosto" dell'elemento DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

— Andrey Hohutkin
fonte

0

Rendi invisibile usando i CSS

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

Rendi visibile utilizzando Javascript

document.getElementById('div_id').style.visibility = 'visible';

— Dilip Kumar Choudhary
fonte