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

如果您想为隐藏元素分配空间，而不是使用“显示” 来切换视图，请使用“可见性” 属性。

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

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

希望这会有所帮助。

当元素的显示从“无”变为“块”时，按钮移动

2 个答案: