好程序员官网-从平凡到卓越,为梦想而拼搏-好程序员特训营

用js如何实现显示和隐藏

来源：好程序员发布人：lxl 2023-06-06

推荐

　　在 JavaScript 中，可以使用 getElementById() 方法来获取文档中的元素，并使用 style.display 属性来显示或隐藏该元素。

　　示例代码如下：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Show and Hide Example</h2>

<button onclick="myFunction()">Show Text</button>
<button onclick="myFunction()">Hide Text</button>

<p id="text" style="display:none">Hello World!</p>

<script>
function myFunction() {
  var x = document.getElementById("text");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

　　在上面的代码中，我们创建了两个按钮，分别用于显示和隐藏文本。当用户单击按钮时，会调用 myFunction() 方法。myFunction() 方法获取元素 text (使用 getElementById() 方法)，如果该元素当前的 display 样式为 “none”，则将其设置为 “block”，以显示该元素。如果该元素当前的 display 样式为 “block”，则将其设置为 “none”，以隐藏该元素。

　　需要注意的是，此方法适用于在 HTML 页面中直接使用 JavaScript 的简单情况。在实际的生产环境中，可能需要更复杂的逻辑和交互来处理显示和隐藏。

全国旗舰校区

用js如何实现显示和隐藏

相关文章