如何在javascript中隱藏段落？

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 = "none" 和visibility = "hidden" 之間的區別在於。 顯示為“none”時，元素將從頁面上的元素布局中刪除。 隨着可見性“隱藏”，元素仍然占據它的空間，你只是看不到它了。 並將腳本標簽移動到頁面底部。 在關閉之前使用標簽是一種很好的做法，這樣所有元素都已經存在於頁面中，您無需擔心包裝代碼。

Answer 4

此 html <p style="visibility: hidden" id="para">Message has been sent</p>將可見性設置為隱藏，因此在屏幕中無法看到。

所以document.getElementById("para").style.visibility = "hidden"; 不會有任何區別