用js如何实现显示和隐藏

当前位置：首页 / 技术干货 / 正文

用js如何实现显示和隐藏

2023-06-06

js 前端贵阳前端贵阳广州

　　在 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 的简单情况。在实际的生产环境中，可能需要更复杂的逻辑和交互来处理显示和隐藏。

分享：更多

上一篇：static修饰的静态变量可不可以被修改？为什么？

下一篇：用js获取服务器时间戳的方法