使用 JavaScript 通过 id 隐藏元素

作者

使用 JavaScript 通过 id 隐藏元素

Hide an Element by id using JavaScript

要通过 id 隐藏元素，请使用getElementById()
方法选择元素并将元素的style.display属性设置为none。将元素的display属性设置为none从 DOM 中删除该元素，就好像该元素从未存在于页面上一样。

以下是本文示例的 HTML。

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

  <body>
    <div id="box">Box</div>

    <button id="btn">Hide Box</button>

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

这是相关的 JavaScript 代码。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const box = document.getElementById('box');

  // 👇️ removes element from DOM
  box.style.display = 'none';

  // 👇️ hides element (still takes up space on page)
  // box.style.visibility = 'hidden';
});

我们向按钮元素添加了一个事件侦听器，该按钮元素隐藏了div点击事件。

我们使用
document.getElementById
方法获取带有idof的元素box。

请注意，我们在示例中使用了
display css 属性，但是您可能需要
visibility
属性，具体取决于您的用例。

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

另一方面，当元素的visibility属性设置为 时hidden，它仍会占用页面空间，但该元素是不可见的（未绘制）。它仍然会像往常一样影响您页面上的布局。

如果您单击button示例中的元素，该div元素将从 DOM 中移除，按钮元素将取而代之。

下面是一个示例，它使用该visibility属性通过其隐藏元素
id。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const box = document.getElementById('box');

  // 👇️ hides element (still takes up space on page)
  box.style.visibility = 'hidden';
});

单击该按钮时， 将div变为不可见，但它仍会占用页面空间。

另一方面，如果该元素的display属性设置为none，则它不再占用页面空间，并且通常其他元素会移动并取而代之。

–

发表评论