使用 JavaScript 按 ID 显示/隐藏 Div 元素

作者

使用 JavaScript 按 ID 显示/隐藏 Div 元素

Show/Hide a Div element by ID using JavaScript

通过 id 显示/隐藏 div 元素：

  1. 访问元素的style.display属性。div
  2. 如果display属性的值设置为none，则将其设置为block。
  3. 否则，将值设置为none。

以下是本文示例的 HTML。

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

  <body>
    <div id="box" style="background-color: salmon; width: 100px; height: 100px">
      Box 1
    </div>

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

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

这是相关的 JavaScript 代码。

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

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

btn.addEventListener('click', function handleClick() {
  if (box.style.display === 'none') {
    box.style.display = 'block';

    btn.textContent = 'Hide div';
  } else {
    box.style.display = 'none';

    btn.textContent = 'Show div';
  }
});

按 id 显示隐藏 div

我们使用document.getElementById
方法div通过其 id
选择。

然后，我们click为按钮添加了一个事件监听器。每次单击按钮时，handleClick()都会调用该函数。

在函数中，我们检查按钮的displayCSS 属性的值是否为
none。

如果该元素的display值设置为none，则它是隐藏的，在这种情况下，我们将其display值设置为以显示该元素。 block

否则，div显示 ，在这种情况下，我们将其display值设置
none为隐藏它。

我们还使用了属性，在隐藏/显示textContent时更新按钮的文本
。div

我们在示例中使用了display
属性，但是您可能需要

根据您的用例使用visibility属性。

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

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

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

下面是一个示例，它使用该属性
通过其 idvisibility显示/隐藏元素。div

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

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

btn.addEventListener('click', function handleClick() {
  if (box.style.visibility === 'hidden') {
    box.style.visibility = 'visible';

    btn.textContent = 'Hide div';
  } else {
    box.style.visibility = 'hidden';

    btn.textContent = 'Show div';
  }
});

按 id 可见性显示隐藏 div

如果单击按钮元素，您会看到 div 已隐藏，但按钮不会在页面上占据它的位置。

即使该div元素未呈现，它仍会正常影响页面上的布局。

当我们使用该display属性隐藏元素时，当元素从文档中完全删除时div，按钮将在 DOM 中取而代之。div

–

发表评论