当元素的显示从"none"变为"block"时，按钮会移动

Question

我试图在单击按钮时显示一个元素，但是当它被单击时，按钮向下移动。再次单击该按钮时，它会向上移动。

var p = document.getElementById("p");
function changeDisplay() {
	if (p.style.display == "block") {
		p.style.display = "none";
	} else {
		p.style.display = "block";
	}
}

<p id="p" style="display: none;">Hello World</p>
<button onclick="changeDisplay()">Button</button>

我可以将按钮移动到 p 下方，但随后会移动另一个元素。

Answer 1

您可以改用visibility属性。这将隐藏元素(p(，但不会将其从布局中删除：

var p = document.getElementById("p");
function changeDisplay() {
  if (p.style.visibility == "visible") {
    p.style.visibility = "hidden";
  } else {
    p.style.visibility = "visible";
  }
}

<p id="p" style="visibility: hidden;">Hello World</p>
<button onclick="changeDisplay()">Button</button>

使用三元元更短一点(@AlexandrVyshnyvetskyi 建议(：

var p = document.getElementById('p');
function changeDisplay() {
  p.style.visibility = (p.style.visibility === 'visible' ? 'hidden' : 'visible');
}

<p id="p" style="visibility: hidden;">Hello World</p>
<button onclick="changeDisplay()">Button</button>

Answer 2

如果要为隐藏元素分配空间，而不是使用"display">来切换视图，请使用"可见性">属性。

if (p.style.visibility == "hidden") {   
    p.style.visibility = "visible";     
} else { 
    p.style.visibility = "hidden"; 
}

它们之间的唯一区别是浏览器为 可见性：隐藏元素。

希望这有帮助。