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

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

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

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

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

我想build议你的JQuery选项。

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

例如:

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

我会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检查器中的原始状态,所以看起来好像是更好的方法。

你应该认为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> 

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

使用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(),除非你特别需要它是一个切换。 我希望你发现这个信息是有帮助的。

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

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

只需创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()"> 

我推荐使用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> 

如果你在桌子上使用它:

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