JavaScript nascondi / mostra elemento

Puoi anche usare questo codice per mostrare / hide gli elementi:

 document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.visibility = "visible"; 

Nota La differenza tra style.visibility e style.display si ha quando si usa la visibilità: nascosto a differenza del display: none, il tag non è visibile, ma lo spazio viene allocato per esso sulla pagina. Il tag è reso, non è visto sulla pagina.

Vedi questo link per vedere le differenze.

Vorrei suggerire l’opzione JQuery .

 $("#item").toggle(); $("#item").hide(); $("#item").show(); 

Per esempio:

 $(document).ready(function(){ $("#item").click(function(event){ //Your actions here }); }); 

Vorrei suggerire questo per hide gli elementi (come altri hanno suggerito):

 document.getElementById(id).style.display = 'none'; 

Ma per rendere visibili gli elementi, suggerirei questo (invece di display = ‘block’):

 document.getElementById(id).style.display = ''; 

Il motivo è che l’uso di display = ‘block’ sta causando margini / spazi bianchi aggiuntivi accanto all’elemento reso visibile sia in IE (11) sia in Chrome (Versione 43.0.2357.130 m) sulla pagina su cui sto lavorando.

Quando carichi per la prima volta una pagina in Chrome, un elemento senza attributo di stile apparirà in questo modo nella finestra di ispezione DOM:

 element.style { } 

Nascondendolo usando lo standard JavaScript, questo lo rende, come previsto:

 element.style { display: none; } 

Rendendolo visibile di nuovo usando display = ‘block’ lo cambia in questo:

 element.style { display: block; } 

Quale non è lo stesso come originariamente era. Questo potrebbe benissimo non fare alcuna differenza nella maggior parte dei casi. Ma in alcuni casi, introduce anomalie.

L’utilizzo di display = ” lo ripristina allo stato originale nel DOM inspector, quindi sembra l’approccio migliore.

Dovresti pensare JS per il comportamento e CSS per le caramelle visive il più ansible. Cambiando il tuo HTML un po ‘:

  Edit    Lorem ipsum ...   

Sarai in grado di passare da una vista all’altra semplicemente usando le regole CSS:

 td.post-editing > a.post-edit-btn, td.post-editing > span.post-text, td.post > span.post-answer { display : none; } 

E il codice JS che passa tra le due classi

Anche se questa domanda ha avuto risposta molte volte, ho pensato di aggiungerla con una risposta più completa e solida per i futuri utenti. La risposta principale risolve il problema, ma credo che potrebbe essere meglio conoscere / comprendere alcuni dei vari modi per mostrare / hide le cose.

.

Modifica della visualizzazione tramite css ()

Questo è il modo in cui l’ho fatto fino a quando ho trovato alcuni di questi altri modi.

Javascript:

 $("#element_to_hide").css("display", "none"); // To hide $("#element_to_hide").css("display", ""); // To unhide 

Professionisti:

• Nasconde e mostra. Questo è tutto.

Contro:

• Se si utilizza l’attributo “display” per qualcos’altro, sarà necessario codificare il valore di ciò che era prima di hide. Quindi se tu avessi “in linea”, dovresti fare $("#element_to_hid").css("display", "inline"); altrimenti tornerà al “blocco” o qualsiasi altra cosa a cui sarà forzato.
• Si presta a errori di battitura.

Esempio: https://jsfiddle.net/4chd6e5r/1/

.

Modifica della visualizzazione usando addClass () / removeClass ()

Durante l’impostazione dell’esempio per questo, in realtà mi sono imbattuto in alcuni difetti su questo metodo che lo rendono molto molto inaffidabile.

CSS / Javascript:

 .hidden {display:none} $("#element_to_hide").addClass("hidden"); // To hide $("#element_to_hide").removeClass("hidden"); // To unhide 

Professionisti:

• Si nasconde …. a volte. Fare riferimento a p1 nell’esempio.
• Dopo averlo scoperto, tornerà a utilizzare il valore di visualizzazione precedente …. a volte. Fare riferimento a p1 nell’esempio.
• Se vuoi afferrare tutti gli oggetti nascosti, devi solo fare $(".hidden") .

Contro:

• Non si nasconde se il valore di visualizzazione è stato impostato direttamente sull’html. Fare riferimento a p2 nell’esempio.
• Non si nasconde se il display è impostato in javascript usando css (). Fare riferimento a p3 nell’esempio.
• Leggermente più codice perché devi definire un attributo css.

Esempio: https://jsfiddle.net/476oha8t/8/

.

Modifica della visualizzazione usando toggle ()

Javascript:

 $("element_to_hide").toggle(); // To hide and to unhide 

Professionisti:

• Funziona sempre.
• Ti consente di non preoccuparti di quale stato era prima di passare. L’uso ovvio per questo è per un …. pulsante di triggerszione.
• Breve e semplice

Contro:

• Se hai bisogno di sapere a quale stato si sta passando per fare qualcosa non direttamente correlato, dovrai aggiungere altro codice (una dichiarazione if) per scoprire in quale stato si trova.
• Simile al cono precedente, se si desidera eseguire un set di istruzioni che contiene il commutatore () allo scopo di nascondersi, ma non si sa se è già nascosto, è necessario aggiungere un controllo (una dichiarazione if) per scoprire prima e se è già nascosto, quindi saltare. Fare riferimento a p1 dell’esempio.
• In relazione ai precedenti 2 contro, l’uso di toggle () per qualcosa che si nasconde o che mostra specificamente, può essere fonte di confusione per gli altri che leggono il codice in quanto non sanno in che modo si alterneranno.

Esempio: https://jsfiddle.net/cxcawkyk/1/

.

Cambiare la visualizzazione usando hide () / show ()

Javascript:

 $("#element_to_hide").hide(); // To hide $("#element_to_hide").show(); // To show 

Professionisti:

• Funziona sempre.
• Dopo averlo scoperto, tornerà a usare il valore di visualizzazione precedente.
• Saprai sempre in quale stato ti stai scambiando:
  1. non è necessario aggiungere le istruzioni per verificare la visibilità prima di modificare gli stati se lo stato è importante.
  2. non confonderà gli altri leggendo il tuo codice su quale stato stai passando a se, se lo stato è importante.
• Intuitivo.

Contro:

• Se vuoi imitare un interruttore, dovrai prima controllare lo stato e poi passare all’altro stato. Usa invece () per questi. Fare riferimento a p2 dell’esempio.

Esempio: https://jsfiddle.net/k0ukhmfL/

.

In generale, direi che il migliore è hide () / show () a meno che non sia necessario specificarlo come interruttore. Spero che tu abbia trovato queste informazioni utili.

puoi usare la proprietà nascosta dell’elemento:

 document.getElementById("test").hidden=true; document.getElementById("test").hidden=false 

Crea i metodi Nascondi e Mostra te stesso per tutti gli elementi, come segue

 Element.prototype.hide = function() { this.style.display = 'none'; } Element.prototype.show = function() { this.style.display = ''; } 

Dopo questo puoi usare i metodi con i soliti identificatori di elementi come in questi esempi:

 document.getElementByTagName('div')[3].hide(); document.getElementById('thing').show(); 

o:

Raccomando Javascript, perché è relativamente veloce e più malleabile.

    Edit    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  

Se lo stai usando in una tabella, usa questo: –

    Edit    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum