In JavaScript, possiamo nascondere gli elementi usando il stile.display o utilizzando il stile.visibilità . IL visibilità La proprietà in JavaScript viene utilizzata anche per nascondere un elemento. La differenza tra il stile.display E stile.visibilità è quando si utilizza visibilità: nascosta, il tag non è visibile, ma lo spazio è allocato. Utilizzando visualizzazione: nessuno, anche il tag non è visibile, ma non c'è spazio allocato sulla pagina.
In HTML possiamo usare il file nascosto attributo per nascondere l'elemento specificato. Quando il nascosto L'attributo in HTML è impostato su true, l'elemento è nascosto o quando il valore lo è falso, l'elemento è visibile.
Sintassi
La sintassi generale per nascondere un elemento utilizzando stile.nascosto E stile.visibilità è dato come segue.
Utilizzando stile.nascosto
document.getElementById('element').style.display = 'none';
Utilizzando stile.visibilità
document.getElementById('element').style.visibility = 'none';
Vediamo ora alcuni esempi per comprendere l'occultamento degli elementi javascript .
Esempio 1
In questo esempio vedremo come rimuovere elementi utilizzando JavaScript stile.display proprietà. Qui c'è un div e un elemento paragrafo che viene nascosto facendo clic sul dato Pulsante HTML . Dobbiamo fare clic su 'Cliccami!' pulsante per vedere l'effetto.
style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Provalo adesso Produzione
Nell'output, possiamo vedere che il file div elemento (sul quale abbiamo applicato stile.visibilità proprietà) si nasconde ma alloca comunque lo spazio. Ma la voce (sulla quale abbiamo applicato stile.display proprietà) si nasconde e non assegna alcuno spazio.
Dopo aver fatto clic sul pulsante, il risultato sarà:
