使用 JavaScript 单击按钮后隐藏按钮

使用 JavaScript 在单击按钮后隐藏按钮

Hide a Button after clicking it using JavaScript

单击按钮后隐藏按钮：

向按钮添加click事件侦听器。
每次单击该按钮时，将其style.display属性设置为none。
当该display属性设置为时none，该元素将从 DOM 中移除。

以下是本文示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="
        height: 100px;
        width: 100px;
        background-color: salmon;
        display: none;
      "
    >
      Box
    </div>
    <button id="btn">Click me</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  // 👇️ hide button
  btn.style.display = 'none';

  // 👇️ show div
  const box = document.getElementById('box');
  box.style.display = 'block';
});

我们向click按钮添加了一个事件侦听器，因此每次单击时都会调用一个函数。

每次单击该按钮时，其display属性都会设置none为隐藏它。

示例中的最后一行将displaya 的属性设置为在隐藏按钮后显示它。 divblock

如果您单击该按钮，您将看到该按钮消失并div显示出来。

我们将按钮的
display CSS 属性设置none为隐藏它。

但是，您可能需要
visibility
属性，具体取决于您的用例。

当元素的display属性设置为时none，该元素将从 DOM 中移除并且对布局没有影响。文档呈现为好像该元素不存在一样。

另一方面，当元素的visibility属性设置为时hidden，它仍会占用页面空间，但该元素是不可见的（未绘制）。

该元素仍会照常影响页面上的布局。

下面是一个使用该visibility属性在单击按钮后隐藏按钮并显示div元素的示例。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="
        height: 100px;
        width: 100px;
        background-color: salmon;
        visibility: hidden;
      "
    >
      Box
    </div>
    <button id="btn">Click me</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  // 👇️ hide button (still takes up space on page)
  btn.style.visibility = 'hidden';

  // 👇️ show div
  const box = document.getElementById('box');
  box.style.visibility = 'visible';
});

如果刷新页面，您会看到该按钮仍然占用空间，但不可见。

visibility这就是设置tohidden和displayto
之间的区别none。

如果您希望避免改变可能会让用户感到困惑的页面布局，则此行为可能会更好。

–