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

我想建议你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>

我建议这样隐藏元素(就像其他人建议的那样):

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

但是为了让元素可见，我建议这样做(而不是display = 'block'):

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

原因是使用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

优点:

• 隐藏和取消。差不多就是这样。

缺点:

• 如果将"display"属性用于其他用途，则必须硬编码隐藏之前的值。因此，如果你有"inline"，你必须执行$("#element_to_hid").css("display", "inline");，否则它将默认返回"block"或其他它将被迫进入的状态。
• 容易出现错别字。

例如: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上设置显示值，则不隐藏。参考例子中的p2。
• 如果使用css()在javascript中设置显示，则不隐藏。请参见样例中的p3。
• 代码稍微多一点，因为你必须定义一个css属性。

例如:https://jsfiddle.net/476oha8t/8/

．

使用toggle()改变显示

Javascript:

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

优点:

• 总是工作。
• 允许您不必担心切换之前是哪个状态。它的明显用途是....切换按钮。
• 简短而简单。

缺点:

• 如果您需要知道它切换到哪个状态以执行一些不直接相关的操作，则必须添加更多的代码(If语句)来找出它所处的状态。
• 类似于前面的骗局，如果你想运行一组包含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. 如果状态很重要，就不会让读代码的人弄不清楚你要切换到哪个状态。
  李< / ol > < / >
  3. 直观。

缺点:

• 如果要模拟切换，必须先检查状态，然后切换到另一个状态。使用toggle()来代替这些。参考示例中的p2。

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

．

总的来说，我认为最好是hide()/show()，除非你特别需要它是一个切换。我希望这些信息对你有帮助。

你可以使用element的hidden属性:

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

只需为所有元素自己创建隐藏和显示方法，如下所示

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()">

如果你在表格中使用它，使用这个:-

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

类和id的香草JS

通过ID

document.querySelector('#element-id').style.display = 'none';

按类别(单个元素)

document.querySelector('.element-class-name').style.display = 'none';

按类别(多个元素)

for (const elem of document.querySelectorAll('.element-class-name')) {
elem.style.display = 'none';
}

document.getElementById("an_id").hidden = true;

📅2022 -极简主义方式🍃

•特权:避免更改任何会< >强糟蹋< / >强代码的style属性。

const hideElement = (e, ok) => e.setAttribute('hidden', !!ok);

[hidden="true"] { display: none }

• < p > 显示👁️

  hideElement(myElement, false);
  

• < p > 隐藏🚫

  hideElement(myElement, true);
  

🍀__abc0 __abc1