Élément JavaScript hide / show

 <script type="text/javascript"> function showStuff(id, text, btn) { document.getElementById(id).style.display = 'block'; // hide the lorem ipsum text document.getElementById(text).style.display = 'none'; // hide the link btn.style.display = 'none'; } </script> <td class="post"> <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a> <span id="answer1" style="display: none;"> <textarea rows="10" cols="115"></textarea> </span> <span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span> </td> 

J'aimerais vous suggérer l'option JQuery .

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

Par exemple:

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

Vous pouvez également utiliser ce code pour afficher / masquer les éléments:

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

Remarque La différence entre style.visibility et style.display est lors de l'utilisation de la visibilité: caché à la différence de l'affichage: aucun, la balise n'est pas visible, mais l'espace est alloué sur la page. La balise est rendue, elle n'est pas visible sur la page.

Voir ce lien pour voir les différences.

Je suggérerais cela pour cacher des éléments (comme d'autres l'ont suggéré):

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

Mais pour rendre les éléments visibles, je suggérerais ceci (au lieu d'afficher = 'bloc'):

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

La raison en est que l'utilisation de display = 'block' provoque une marge / espace blanc supplémentaire à côté de l'élément visible dans IE (11) et Chrome (Version 43.0.2357.130 m) sur la page sur laquelle je travaille.

Lorsque vous chargez d'abord une page dans Chrome, un élément sans attribut style apparaîtra comme ceci dans l'inspecteur DOM:

 element.style { } 

Cacher cela en utilisant le JavaScript standard le rend tel, comme prévu:

 element.style { display: none; } 

Le fait de le rendre visible à nouveau en utilisant display = 'block' le modifie à ceci:

 element.style { display: block; } 

Ce n'est pas le même qu'il était à l'origine. Cela pourrait très bien ne pas faire de différence dans la majorité des cas. Mais dans certains cas, il présente des anomalies.

L'utilisation de display = '' le restaure à son état d'origine dans l'inspecteur des DOM, donc il semble être la meilleure approche.

Vous devriez penser JS pour le comportement, et CSS pour les bonbons visuels autant que possible. En changeant un peu votre HTML:

 <td class="post"> <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a> <span id="answer1" class="post-answer"> <textarea rows="10" cols="115"></textarea> </span> <span class="post-text" id="text1">Lorem ipsum ... </span> </td> 

Vous pourrez passer d'une vue à l'autre simplement en utilisant les règles CSS:

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

Et le code JS qui bascule entre les deux classes

 <script type="text/javascript"> function showStuff(aPostTd) { aPostTd.className="post-editing"; } </script> 

Vous pouvez utiliser la propriété cachée de l'élément:

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

Bien que cette question ait été répondu plusieurs fois auparavant, j'ai pensé que je lui ajouterais une réponse plus complète et plus solide pour les futurs utilisateurs. La réponse principale résout le problème, mais je crois qu'il est préférable de connaître certaines des différentes façons de montrer / masquer les choses.

.

Modification de l'affichage à l'aide de css ()

C'est la façon dont je l'ai fait jusqu'à ce que j'ai trouvé certaines de ces autres façons.

Javascript:

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

Avantages:

• Cache et déchire. C'est à peu près ça.

Les inconvénients:

• Si vous utilisez l'attribut "affichage" pour autre chose, vous devrez coder la valeur de ce qu'il était avant de se cacher. Donc, si vous aviez "en ligne", vous devriez faire $("#element_to_hid").css("display", "inline"); Sinon, il sera par défaut de "bloc" ou quoi d'autre qu'il sera contraint.
• Se prête à des fautes de frappe.

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

.

Modification de l'affichage à l'aide de addClass () / removeClass ()

Tout en configurant l'exemple pour celui-ci, j'ai rencontré des défauts sur cette méthode qui rendent cela très peu fiable.

Css / Javascript:

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

Avantages:

• Il cache … parfois. Reportez-vous à p1 sur l'exemple.
• Après la mise en veille, il retournera à l'utilisation de la valeur d'affichage précédente … parfois. Reportez-vous à p1 sur l'exemple.
• Si vous voulez attraper tous les objets cachés, il vous suffit de faire $(".hidden") .

Les inconvénients:

• Ne se cache pas si la valeur d'affichage a été définie directement sur le html. Reportez-vous à p2 sur l'exemple.
• Ne se cache pas si l'affichage est défini dans javascript en utilisant css (). Reportez-vous à p3 sur l'exemple.
• Un peu plus de code parce que vous devez définir un attribut css.

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

.

Modification de l'affichage à l'aide de la bascule ()

Javascript:

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

Avantages:

• Fonctionne toujours.
• Permet de ne pas avoir à vous soucier de l'état qu'il était avant de passer. L'utilisation évidente de ceci est pour un bouton …. bascule.
• Court et simple.

Les inconvénients:

• Si vous devez savoir à quel état il se déplace afin de faire quelque chose qui n'est pas directement lié, vous devrez ajouter plus de code (une déclaration if) pour savoir dans quel état il se trouve.
• À l'instar du con précédent, si vous souhaitez exécuter un ensemble d'instructions contenant le basculement () afin de se cacher, mais vous ne savez pas s'il est déjà caché, vous devez ajouter un contrôle (une instruction if) Pour savoir d'abord et s'il est déjà caché, sautez. Reportez-vous à la page 1 de l'exemple.
• En ce qui concerne les 2 inconvénients précédents, en utilisant toggle () pour quelque chose qui se cache spécifiquement ou qui montre spécifiquement, cela peut être source de confusion pour les autres qui lisent votre code car ils ne savent pas de quelle manière ils vont basculer.

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

.

Modification de l'affichage à l'aide de hide () / show ()

Javascript:

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

Avantages:

• Fonctionne toujours.
• Après la mise en veille, il reviendra à l'utilisation de la valeur d'affichage précédente.
• Vous saurez toujours à quel état vous échangez afin que vous:
  1. N'ont pas besoin d'ajouter des instructions si pour vérifier la visibilité avant de modifier les états si l'état compte.
  2. Ne va pas confondre les autres qui lisent votre code quant à l'état auquel vous parlez si, si l'état compte.
• Intuitif.

Les inconvénients:

• Si vous souhaitez imiter une bascule, vous devrez vérifier l'état en premier, puis passer à l'autre état. Utilisez alternativement () pour cela. Reportez-vous à la page 2 de l'exemple.

Exemple: https://jsfiddle.net/k0ukhmfL/

.

Dans l'ensemble, je dirais le meilleur pour être caché () / show () à moins que vous ne l'ayez spécifiquement besoin d'être un basculeur. J'espère que vous avez trouvé cette information utile.

Créez simplement des méthodes de cache et de démonstration pour tous les éléments, comme suit

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

Après cela, vous pouvez utiliser les méthodes avec les identifiants d'éléments habituels comme dans ces exemples:

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

ou:

 <img src="removeME.png" onclick="this.hide()"> 

Je recommande Javascript, car c'est relativement rapide et plus malléable.

  <script> function showStuff(id, text, btn) { document.getElementById(id).style.display = 'block'; // hide the lorem ipsum text document.getElementById(text).style.display = 'none'; // hide the link btn.style.display = 'none'; } </script> <td class="post"> <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a> <span id="answer1" style="display: none;"> <textarea rows="10" cols="115"></textarea> </span> <span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span> </td>