it-swarm.it

Cosa fa effettivamente style.display = ''?

Dopo aver studiato questo problema per un paio d'ore, ho scoperto che uno dei modi più efficienti per attivare/disattivare la visualizzazione di un elemento di pagina (in HTML) è fare qualcosa del tipo:

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

Domanda semplice: Cosa significa style.display = '' davvero?

"Reimposta" la proprietà di visualizzazione originale?

Oppure rimuove la proprietà display, utilizzando quindi lo stile predefinito per display?

..........................................

Sarebbe bello sapere: Qualcuno sa di eventuali collegamenti a qualsiasi tipo di documentazione su questo?

(Sì, ho Google-d questo problema, ma probabilmente non sto inserendo il termine di ricerca giusto e continuo a trovare risultati di ricerca completamente non correlati.)

Grazie per eventuali suggerimenti o collegamenti.

47
Shawn Spencer

Sì, reimposta la proprietà di visualizzazione dell'elemento sul valore predefinito cancellando "display: none" in linea, facendo in modo che l'elemento ricada sulla sua proprietà di visualizzazione come definito dalle regole CSS di classificazione della pagina.

Ad esempio, ecco un <div> con l'ID di "myElement".

<div id="myElement"></div>

A <div> ha un'impostazione di display:block per impostazione predefinita. Nel nostro foglio di stile, supponiamo di specificare che il tuo <div> deve essere visualizzato come table:

div#myElement
{
    display:table;
}

Al caricamento della pagina, il <div> viene visualizzato come table. Se vuoi nascondere questo <div> con gli script, potresti eseguire una di queste operazioni:

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

Tutti hanno lo stesso effetto: l'aggiunta di una proprietà style inline al tuo <div>:

<div id="myElement" style="display:none"></div>

Se desideri mostrare di nuovo l'elemento, uno di questi funzionerebbe:

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

Rimuovono la proprietà CSS display dalla proprietà style incorporata:

<div style=""></div>

Poiché lo stile inline non specifica più un display, il <div> torna ad essere visualizzato come table, poiché è quello che inseriamo nel foglio di stile. Il <div> non ripristina la visualizzazione come block perché il nostro CSS ha sostituito quell'impostazione predefinita; sopprimendo la proprietà inline display non si annullano le regole nei nostri fogli di stile.


Per le risatine, ecco la query di Google che ho usato per la verifica della mia risposta: javascript style display empty string default

... e un paio di collegamenti in cui questo è menzionato:

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ (non nell'articolo, ma nella sezione commenti)

42
Jake

Imposta lo stile display sul valore predefinito per quell'elemento. Per la maggior parte degli elementi, se non tutti, il valore predefinito è diverso da none.

10
BoltClock

Rimuove il valore per la proprietà display in modo che venga utilizzato il valore predefinito.

non ripristina la proprietà di visualizzazione originale.

Se ad esempio hai questo:

<span id="test" style="display:block;">b</span>

E fai questo:

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

lo stile display utilizzato per l'elemento finisce per essere inline perché è l'impostazione predefinita per l'elemento, non viene ripristinato allo stile specificato nel codice HTML.

6
Guffa

Imposta il CSS per la visualizzazione di quell'elemento su null che essenzialmente cancella ciò che è stato impostato e torna al suo valore predefinito.

1
Neal