javascript - 当元素的显示从 "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属性(property)代替。这将隐藏元素 (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>