HTML 在线编辑器| BEGTUT.COM

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>display:none 和 visibility: hidden 的区别</h3>
<p><strong>visibility:hidden</strong> 隐藏元素，但它仍然占用布局空间。</p>
<p><strong>display:none</strong> 从文档中删除元素。 它不占用任何空间。</p>

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>