Come mostrare o nascondere un elemento sul sito Web utilizzando JavaScript

Durante tutto lo sviluppo web, gli utenti devono nascondere o mostrare alcuni elementi. Questi elementi possono essere un pulsante, un po 'di animazione o una barra di navigazione ecc. Il più delle volte l'utente desidera che un pulsante o una barra di navigazione siano visibili per il punto di vista del desktop ma non per il punto di vista mobile.

Con JavaScript, gli utenti possono facilmente nascondere o mostrare un elemento sulla pagina Web, a seconda del comportamento dell'utente. In questo articolo vedremo come viene utilizzato JavaScript per questo scopo.

Nascondere e visualizzare elementi in JavaScript

Usando JavaScript, possiamo nascondere o mostrare un elemento sulla pagina web usando:

• stile.Schermo
• stile.visibilità

Comprendiamo ciascuno di essi separatamente con esempi e quindi confrontiamo come differiscono l'uno dall'altro:

Come usare lo stile.Visualizza in JavaScript: La proprietà del display rappresenta un elemento che dovrebbe essere visualizzato sulla pagina web ... L'uso di questo utente può nascondere l'intero elemento e la pagina è costruita come l'elemento precedente non c'era affatto.

Sintassi:

Qui nelle virgole, dovrebbe essere definito un valore per visualizzare o meno il contenuto. Ecco un esempio:

Per nascondere l'elemento: stile.Display = "Nessuno":

Fai clic sul pulsante "Hide Me" per nascondere l'elemento Div:

Mentre l'utente fa clic sul pulsante, la funzione viene chiamata per nascondere l'elemento. Questo viene fatto assegnando nessuno a stile.Schermo.

Ora guarda l'uscita, come il pulsante ha occupato lo spazio dell'immagine. Ecco come funziona il display, nasconde completamente l'elemento e ricostruisce la pagina come se l'elemento non fosse lì in primo luogo.

Per mostrare un elemento: stile.display = "" o "blocco":

Fai clic sul pulsante "Show Me" per mostrare l'elemento l'elemento Div:

Ora allo stesso modo, per mostrare l'elemento il pulsante si è spostato e ha fornito spazio all'elemento quando il display è stato modificato dallo stile.Display = "Nessuno" per stile.display = "".

In questi modi, l'elemento verrà visualizzato o completamente nascosto e non solo la sua visibilità. La pagina verrà ricostruita secondo questi comportamenti.

Come usare lo stile.Visibilità in JavaScript: La visibilità di stile funziona in modo simile, ma la differenza è che solo la visibilità dell'elemento è nascosta dal lettore dello schermo. Ciò significa che l'elemento non viene rimosso dal flusso di pagina, lasciando quindi spazio per esso sulla pagina.

Sintassi:

Qui nelle virgole, un valore di "nascosto" o "" nessun valore dovrebbe essere definito per visualizzare il contenuto o meno. Per capire meglio questo, ecco un esempio:

Questo è un paragrafo.

Questo è un altro paragrafo.

Ora, qui quando il pulsante è stato fatto clic su Ato nascondere la visibilità, lo ha nascosto solo per l'occhio dello spettatore.

In questo, lo spazio sulla pagina web non era occupato dall'elemento. Questo mostra come stile.display e stile.visibilità differire.

Conclusione

Tutti vogliono nascondere o mostrare alcuni elementi particolari sulla loro pagina web. In questo come guidare, abbiamo imparato i modi per cambiare la visibilità degli elementi sulla pagina web usando JavaScript. Ci sono due modi specifici, ma differiscono leggermente l'uno dall'altro. Usando stile.Schermo Il contenuto viene nascosto e il suo spazio è occupato dall'altro contenuto. Mentre, usando stile.visibilità, solo il contenuto è nascosto per il lettore, ma è ancora lì poiché il suo spazio non può essere occupato da altri elementi. Questo è estremamente utile per gli sviluppatori Web, poiché gli sviluppatori vogliono che alcuni contenuti vengano visualizzati e alcuni vengano visualizzati in base al punto di vista.