如何在javascript中隐藏段落？

上述方法都不管用，但有趣的是，如果我想使用javascript使段落可见，我可以使用：

document.getElementById("para").style.visibility = "hidden";
document.getElementById("para").style.display = "none";

这会使它可见，为什么不能用同样的方法隐藏呢

HTML:

更新见下面的链接：

---

您也可以通过以下方式完成：

显示para:document.getElementById（“para”）.style.opacity=“1”

---

隐藏段落：document.getElementById（“段落”）.style.opacity=“0”

基本上两者都是正确的，但display=“none”和visibility=“hidden”之间的区别在于。显示“无”时，元素将从页面上的元素布局中删除。在可见性“隐藏”的情况下，元素仍然占据着它的空间，你再也看不到它了。并将脚本标记移动到页面底部。最好的做法是在结束之前就有标记，这样所有的元素都已经存在于页面中，您就不必担心将代码包装到页面中

此html

消息已发送

已将可见性设置为隐藏，因此它在屏幕中不可见

---

所以

document.getElementById（“para”）.style.visibility=“hidden”

不会有任何区别

我已经创建了一个代码段，带有工作示例，添加了一个切换按钮：

函数切换（）{
if（document.getElementById（“para”）.style.visibility==“visible”）{
document.getElementById（“para”）.style.visibility=“隐藏”
}否则{
document.getElementById（“para”）.style.visibility=“可见”
}
if（document.getElementById（“emailUs”）.style.visibility==“hidden”）{
document.getElementById（“emailUs”）.style.visibility=“可见”；
}否则{
document.getElementById（“emailUs”）.style.visibility=“hidden”；
}
}
document.getElementById（'myButton'）。addEventListener（'click'，toggle'）
已发送消息

给我们发电子邮件
切换

上面的代码应该可以工作，你能显示HTML吗？更新后的请看一看JS是什么时候执行的？你的第一个代码工作：

document.getElementById（“para”）.style.visibility=“hidden”

@Teemu一旦按下一个按钮，就会进行检查，如果执行了上面的javascript，那么“para”可视性会工作，但是隐藏的“emailUs”不会工作！如果您看到下面的Javascript部分，我会将其设置为visible。上面的代码只是一个例子。我的代码就是这样的，看看我提供的链接。然而，由于某种原因，我不能在这里跑步。对不起，我不能填写表格。我也犯了这个错误，我一直在试图弄清楚为什么会发生这种情况。但无论哪种方式，一旦表单提交，带有“email-Us”的段落应该消失，“message-has-send”可见，“message-has-send”可见，但“email-Us”不会隐藏。我认为，问题在于验证。您只需创建document.getElementById（“para”）的console.log，然后查看它是否未定义

document.getElementById("para").style.visibility = "visible";

<p style="visibility: hidden" id="para">Message has been sent</p>
<p style="visibility: visible" id="emailUs">Email Us!</p>

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