JavaScript隐藏/显示元素

按下后我怎么能隐藏“编辑”链接？ 我也可以隐藏“lorem ipsum”文本，当我按编辑？

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

Answer 1

 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'; } 

 <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> 

Answer 2

您也可以使用此代码来显示/隐藏元素：

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

注意 style.visibility和style.display之间的区别是当使用可见性时：隐藏不同于display：none，标签不可见，但空间在页面上被分配。 标记被渲染，它只是在页面上看不到。

看到这个链接看到的差异。

Answer 3

我想build议你的JQuery选项。

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

例如：

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

Answer 4

我会build议这个隐藏元素（如其他人所build议的）：

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

但为了使元素可见，我build议这个（而不是display ='block'）：

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

原因在于使用display ='block'会在我正在处理的页面上的IE（11）和Chrome（版本43.0.2357.130 m）中使该元素旁边的附加边距/空白显示。

当您第一次在Chrome中加载页面时，DOM检查器中将显示一个没有style属性的元素：

 element.style { } 

隐藏它使用标准的JavaScript使得这一点，如预期的那样：

 element.style { display: none; } 

使用display ='block'再次使其可见，将其更改为：

 element.style { display: block; } 

这与之前的不一样。 这在很大程度上不会造成任何影响。 但在某些情况下，确实引入了exception。

使用display =''会将它恢复到DOM检查器中的原始状态，所以看起来好像是更好的方法。

Answer 5

你应该认为JS的行为，并尽可能多的视觉糖果的CSS。 通过改变你的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> 

您可以简单地使用CSS规则从一个视图切换到另一个视图：

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

以及在两个类之间切换的JS代码

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

Answer 6

虽然这个问题以前已经回答过很多次了，但是我想我会为未来的用户提供一个更加完整和坚实的答案。 主要的答案确实解决了这个问题，但是我相信可能会更好地了解/理解一些显示/隐藏事物的方法。

。

使用css（）更改显示

直到我find其他一些方法之前，我才这样做。

使用Javascript：

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

优点：

• 隐藏和取消隐藏。 就是这样。

缺点：

• 如果你使用其他属性的“display”属性，你将不得不硬编码隐藏之前的值。 所以，如果你有“内联”，你将不得不做$("#element_to_hid").css("display", "inline"); 否则它将默认回到“阻止”或其他任何将被强制进入的状态。
• 适用于拼写错误。

例如： https ： //jsfiddle.net/4chd6e5r/1/

。

使用addClass（）/ removeClass（）更改显示

在为这个例子设置例子时，我实际上碰到了这个方法的一些缺陷，这使得它非常不可靠。

CSS / JavaScript的：

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

优点：

• 它隐藏了….有时。 请参阅示例中的p1。
• 取消隐藏后，有时会返回使用以前的显示值…. 请参阅示例中的p1。
• 如果你想抓住所有隐藏的对象，你只需要做$(".hidden") 。

缺点：

• 如果显示值直接在html上设置，则不会隐藏。 请参阅示例中的第2页。
• 如果使用css（）在javascript中设置显示，则不会隐藏。 请参阅示例中的第3页。
• 稍微多一点的代码，因为你必须定义一个CSS属性。

示例： https ： //jsfiddle.net/476oha8t/8/

。

使用toggle（）更改显示

使用Javascript：

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

优点：

• 始终有效。
• 允许您不必担心切换之前的状态。 这个明显的用途是用于….切换button。
• 简单而简单。

缺点：

• 如果你需要知道它正在切换到哪个状态，以便做一些不直接相关的事情，你将不得不添加更多的代码（一个if语句）来找出它所处的状态。
• 与前面的con类似，如果您想运行一组包含toggle（）以用于隐藏的指令，但不知道它是否已经隐藏，则必须添加一个检查（if语句）首先找出，如果它已经隐藏，然后跳过。 请参阅示例的p1。
• 与之前的两个漏洞相关的是，使用toggle（）来隐藏或特别显示某些内容，可能会让其他人阅读代码时感到困惑，因为他们不知道将以何种方式切换。

例如： https ： //jsfiddle.net/cxcawkyk/1/

。

使用hide（）/ show（）更改显示

使用Javascript：

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

优点：

• 始终有效。
• 取消隐藏后，将返回到使用以前的显示值。
• 你将永远知道你交换的是哪个状态，所以你：
  1. 如果状态更改，则不需要添加if语句以在更改状态之前检查可见性。
  2. 如果国家很重要的话，不会把别人看你的代码弄糊涂到你要切换到哪个状态。
• 直观。

缺点：

• 如果你想模仿一个切换，你将不得不首先检查状态，然后切换到另一个状态。 使用toggle（）代替这些。 请参阅示例的第2页。

例如： https ： //jsfiddle.net/k0ukhmfL/

。

总的来说，我会说最好是隐藏（）/ show（），除非你特别需要它是一个切换。 我希望你发现这个信息是有帮助的。

Answer 7

你可以使用元素的隐藏属性：

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

Answer 8

只需创build隐藏和显示所有元素的方法，如下所示

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

在这之后，您可以像以下示例一样使用常用元素标识符的方法：

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

要么：

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

Answer 9

我推荐使用Javascript，因为它相对较快且更具可塑性。

  <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> 

Answer 10

如果你在桌子上使用它：

  <script type="text/javascript"> function showStuff(id, text, btn) { document.getElementById(id).style.display = 'table-row'; // 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>