JavaScript隐藏/显示元素

按下“编辑”链接后，如何隐藏该链接？我还可以在按编辑时隐藏“lorem ipsum”文本吗

函数showStuff（id）{
document.getElementById（id）.style.display='block'；
}
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

函数showStuff（id、文本、btn）{
document.getElementById（id）.style.display='block'；
//隐藏lorem ipsum文本
document.getElementById（text.style.display='none'；
//隐藏链接
btn.style.display='none'；
}

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

您应该尽可能地将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>

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

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

函数showtuff（aPostTd）{
assottd.className=“后期编辑”；
}

我想向您推荐JQuery选项

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

例如：

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

---

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

函数showStuff（id、文本、btn）{
document.getElementById（id）.style.display='block'；
//隐藏lorem ipsum文本
document.getElementById（text.style.display='none'；
//隐藏链接
btn.style.display='none'；
}
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

我建议这样做来隐藏元素（正如其他人所建议的）：

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

原因是使用display='block'会在我正在处理的页面上的IE（11）和Chrome（43.0.2357.130 m版）中显示的元素旁边产生额外的边距/空白

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

element.style {
}

使用标准JavaScript将其隐藏，使其达到预期效果：

element.style {
  display: none;
}

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

element.style {
  display: block;
}

这与最初的情况不一样。在大多数情况下，这很可能不会产生任何影响。但在某些情况下，它确实会导致异常

---

使用display=''会将其恢复到DOM检查器中的原始状态，因此这似乎是更好的方法。

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

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

注意

style.visibility

和

style.display

之间的区别是 使用visibility:hidden与display:none不同，标记不可见，但在页面上为其分配了空间。标记已呈现，但在页面上看不到它

---

查看此内容以了解差异。

虽然这个问题以前已经回答过很多次，但我想我会为未来的用户提供一个更完整、更可靠的答案。主要答案确实解决了这个问题，但我认为最好了解/理解一些显示/隐藏事物的各种方式

使用css（）更改显示 这是我以前做这件事的方式，直到我找到了其他一些方法

Javascript:

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

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

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

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

优点：

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

缺点：

• 如果将“display”属性用于其他内容，则必须在隐藏之前对其值进行硬编码。所以如果你有“inline”，你就必须做

  $（“#element_to_hid”）.css（“display”，“inline”）否则它将默认返回到“block”或它将被强制进入的任何其他位置

• 容易出错

例如：

使用addClass（）/removeClass（）更改显示 在为这个例子做准备时，我实际上遇到了这个方法的一些缺陷，使得它非常不可靠

Css/Javascript：

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

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

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

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

优点：

• 它有时隐藏着。参考示例中的p1
• 取消隐藏后，它将返回到使用以前的显示值…有时。参考示例中的p1
• 如果您想抓取所有隐藏对象，只需执行

  $（“.hidden”）

缺点：

• 如果直接在html上设置了显示值，则不隐藏。请参阅示例中的p2
• 如果使用css（）在javascript中设置显示，则不隐藏。请参阅示例中的p3
• 代码稍微多一点，因为您必须定义css属性

例如：

使用toggle（）更改显示 Javascript:

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

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

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

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

优点：

• 总是有用的
• 允许您不必担心在切换之前处于哪个状态。这一功能的明显用途是…切换按钮
• 简明扼要

缺点：

• 如果您需要知道它正在切换到哪个状态，以便执行一些不直接相关的操作，那么您必须添加更多代码（If语句）以了解它处于哪个状态
• 与上一个con类似，如果要运行一组包含toggle（）的指令以进行隐藏，但不知道它是否已隐藏，则必须先添加一个检查（if语句）以确定它是否已隐藏，然后跳过。参考示例中的p1
• 与前两个缺点相关，对特定隐藏或特定显示的内容使用toggle（），可能会让阅读您的代码的其他人感到困惑，因为他们不知道将以何种方式进行切换

例如：

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

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

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

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

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

优点：

• 总是有用的
• 取消隐藏后，它将返回使用以前的显示值
• 您将始终知道要切换到哪个状态，以便：
• 如果状态重要，则在更改状态之前不需要添加if语句来检查可见性
• 不会让阅读您代码的其他人混淆您要切换到哪个状态，如果，如果状态重要
• 直觉的

缺点：

• 如果要模拟切换，必须检查状态