使用 TypeScript 隐藏/显示元素

Python PHP Java Go TypeScript C++ Vba Node.js C语言 MATLAB

使用 TypeScript 隐藏/显示元素

作者：迹忆客最近更新：2022/10/09 浏览次数：

要在 TypeScript 中隐藏/显示元素，请使用 style.display 属性来确定元素是显示还是隐藏。如果其 display 属性设置为 none，则通过将其设置为 block 来显示该元素，否则通过将其 display 属性设置为 none 来隐藏该元素。

这是本文中示例的 HTML。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      #container {
        background-color: lime;
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div id="container">Container content</div>

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

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

这是相关的 TypeScript 代码。

const el = document.getElementById('container');

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

if (el != null && btn != null) {
  btn.addEventListener('click', function handleClick() {
    if (el.style.display === 'none') {
      // ✅ Shows element if hidden
      el.style.display = 'block';

      btn.textContent = 'Hide element';
    } else {
      // ✅ Hides element if shown
      el.style.display = 'none';

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

我们使用 if 语句作为类型保护，因为如果在 DOM 中找不到具有提供的 id 的元素，则 document.getElementById 方法返回 null。

if 语句帮助我们从 el 和 btn 变量的类型中删除 null，因此我们可以安全地访问它们的属性。

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

在函数中，我们检查元素的显示属性是否设置为无。

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

否则，元素会显示出来，所以我们将它的 display 属性设置为 none 来隐藏它。

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

我们在示例中使用了 display 属性，但是根据我们的用例，可能需要使用 visibility 属性。

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

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

这是一个使用可见性属性通过其 id 隐藏/显示元素的示例。

const el = document.getElementById('container');

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

if (el != null && btn != null) {
  btn.addEventListener('click', function handleClick() {
    if (el.style.visibility === 'hidden') {
      // ✅ Shows element if hidden
      el.style.visibility = 'visible';

      btn.textContent = 'Hide div';
    } else {
      // ✅ Hides element if shown
      el.style.visibility = 'hidden';

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