Question

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

以上都没有，但有趣的是，如果我想使用javascript制作一个段落我可以使用：

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

这会让它变得可见，为什么不能用同样的方法隐藏它？

HTML：

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

使用Javascript：

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

更新请参阅以下链接：

https://jsfiddle.net/mym23kLr/1/

Answer 1

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

function toggle() {
  if (document.getElementById("para").style.visibility === "visible") {
    document.getElementById("para").style.visibility = "hidden"
  } else {
    document.getElementById("para").style.visibility = "visible"
  }
  if (document.getElementById("emailUs").style.visibility === "hidden") {
    document.getElementById("emailUs").style.visibility = "visible";
  } else {
    document.getElementById("emailUs").style.visibility = "hidden";
  }

}
document.getElementById('myButton').addEventListener('click', toggle);

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

Answer 2

您也可以采取以下方式：

显示para：document.getElementById（“para”）。style.opacity =“1”;

隐藏para：document.getElementById（“para”）。style.opacity =“0”;

Answer 3

基本上两者都是正确的，但是display =＆＃34; none＆＃34; ＆安培;能见度=＆＃34;隐藏＆＃34;就是它。显示＆＃34;无＆＃34;该元素将从页面上的元素布局中删除。随着能见度＆＃34;隐藏＆＃34;元素仍然占据着它的空间，你再也看不到它了。并将脚本标记移动到页面底部。在关闭之前使用标签是一种很好的做法，因此页面中已经存在所有元素，您不必担心将代码包装在其中。

Answer 4

此html <p style="visibility: hidden" id="para">Message has been sent</p>将可见性设置为隐藏，因此屏幕上无法显示。

所以document.getElementById("para").style.visibility = "hidden";不会有任何区别

如何在javascript中隐藏段落？

4 个答案: