JavaScript 隐藏/显示元素

在前端开发中，隐藏或显示元素是一种常见的操作。JavaScript 提供了多种方法来实现这个目标，本文将详细介绍其中的几种。

1. 使用 CSS 样式

使用 CSS 样式可以很容易地隐藏或显示元素。通过设置元素的 display 属性为 none 可以将其隐藏起来，而将它设置为其他值（如 block 或 inline）则可以将其显示出来。

<!-- HTML -->
<div id="myDiv">This is a div.</div>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>

/* CSS */
#myDiv {
  display: block;
}

// JavaScript
function hide() {
  document.getElementById("myDiv").style.display = "none";
}

function show() {
  document.getElementById("myDiv").style.display = "block";
}

上述代码中，当用户点击“Hide”按钮时，myDiv 元素会被隐藏起来；当用户点击“Show”按钮时，该元素会重新显示出来。

2. 使用 jQuery

jQuery 是一种广泛使用的 JavaScript 库，它提供了方便的 API 来操纵 DOM 和处理事件。使用 jQuery，可以通过以下方式来隐藏或显示元素：

<!-- HTML -->
<div id="myDiv">This is a div.</div>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>

// JavaScript with jQuery
function hide() {
  $("#myDiv").hide();
}

function show() {
  $("#myDiv").show();
}

上述代码中，当用户点击“Hide”按钮时，myDiv 元素会被隐藏起来；当用户点击“Show”按钮时，该元素会重新显示出来。

3. 使用 Vue.js

Vue.js 是一种流行的 JavaScript 框架，它可以使开发者轻松地构建交互式 Web 应用程序。使用 Vue.js，可以通过以下方式来隐藏或显示元素：

<!-- HTML with Vue.js -->
<div id="app">
  <div v-if="visible">This is a div.</div>
  <button @click="hide">Hide</button>
  <button @click="show">Show</button>
</div>

-- -------------------- ---- -------
-- ---------- ---- ------
--- -----
  --- -------
  ----- -
    -------- ----
  --
  -------- -
    ------ -
      ------------ - ------
    --
    ------ -
      ------------ - -----
    -
  -
---

上述代码中，v-if 指令用于根据 visible 的值来动态渲染或删除 div 元素。当用户单击“Hide”按钮时，visible 的值将被设置为 false，从而导致 div 元素被删除；当用户单击“Show”按钮时，visible 的值将被设置为 true，从而导致 div 元素重新渲染出来。

总结

本文介绍了三种隐藏或显示元素的方法：使用 CSS 样式、使用 jQuery 和使用 Vue.js。这些方法各有不同的适用场景，开发者应根据具体需求来选择合适的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8956