JS显示隐藏|极客笔记

JS显示隐藏

在网页开发中，显示和隐藏元素是非常常见的操作。通过JavaScript，我们可以轻松地控制元素的显示和隐藏，从而实现交互效果。本文将详细介绍如何使用JavaScript来实现元素的显示和隐藏操作，包括使用DOM操作和CSS样式控制。

使用DOM操作显示隐藏元素

JavaScript可以通过DOM操作来控制元素的显示和隐藏。最常见的方式是通过style属性设置元素的display属性来实现显示和隐藏。

显示元素

通过设置元素的display属性为block或者inline可以让元素显示出来。下面是一个示例：

<!DOCTYPE html>
<html>
<body>

<h2>点击按钮显示元素</h2>

<button onclick="showElement()">显示元素</button>

<div id="element" style="display:none;">
  <p>这是一个隐藏的元素</p>
</div>

<script>
function showElement() {
  document.getElementById("element").style.display = "block";
}
</script>

</body>
</html>

点击按钮后，隐藏的<div>元素就会显示出来。

隐藏元素

通过设置元素的display属性为none可以让元素隐藏起来。下面是一个示例：

<!DOCTYPE html>
<html>
<body>

<h2>点击按钮隐藏元素</h2>

<button onclick="hideElement()">隐藏元素</button>

<div id="element">
  <p>这是一个可见的元素</p>
</div>

<script>
function hideElement() {
  document.getElementById("element").style.display = "none";
}
</script>

</body>
</html>

点击按钮后，可见的<div>元素就会隐藏起来。

使用CSS样式显示隐藏元素

除了使用DOM操作来控制元素的显示和隐藏，我们还可以通过修改元素的CSS样式来实现这个效果。通过设置visibility属性或者opacity属性，可以实现元素的显示和隐藏。

使用visibility属性

通过设置元素的visibility属性为visible或者hidden可以实现元素的显示和隐藏。下面是一个示例：

<!DOCTYPE html>
<html>
<body>

<h2>点击按钮显示/隐藏元素</h2>

<button onclick="toggleElement()">显示/隐藏元素</button>

<div id="element" style="visibility:hidden;">
  <p>这是一个隐藏的元素</p>
</div>

<script>
function toggleElement() {
  var element = document.getElementById("element");
  if (element.style.visibility === "hidden") {
    element.style.visibility = "visible";
  } else {
    element.style.visibility = "hidden";
  }
}
</script>

</body>
</html>

点击按钮后，隐藏的<div>元素会显示出来，再点击按钮则会隐藏起来。

使用opacity属性

通过设置元素的opacity属性为1或者0可以实现元素的显示和隐藏。下面是一个示例：

<!DOCTYPE html>
<html>
<body>

<h2>点击按钮淡入/淡出元素</h2>

<button onclick="fadeElement()">淡入/淡出元素</button>

<div id="element" style="opacity:0;">
  <p>这是一个隐藏的元素</p>
</div>

<script>
function fadeElement() {
  var element = document.getElementById("element");
  if (element.style.opacity === "0") {
    element.style.opacity = "1";
  } else {
    element.style.opacity = "0";
  }
}
</script>

</body>
</html>

点击按钮后，隐藏的<div>元素会以淡入/淡出的效果显示出来或隐藏起来。