在 TypeScript 中使用 DOM 隐藏元素

在 TypeScript 中，在 Web 开发中隐藏元素是一个很常见的需求。本文将介绍如何通过 TypeScript 访问和操作 DOM 元素，并将其中的某些元素隐藏起来。

在 TypeScript 中访问 DOM 元素

在 TypeScript 中，可以使用 document 对象来访问和操作 DOM 元素。可以通过以下方式获取 document 对象：

const doc = document;

一旦获得了 document 对象，就可以通过 getElementById() 方法获取需要操作的 HTML 元素，然后进行操作。

const element = doc.getElementById('myElement');

隐藏元素

在 Web 开发中，经常需要隐藏某些元素，这些元素可以通过应用 CSS 样式来实现。在 TypeScript 中，可以通过更改元素的 CSS 样式来隐藏元素。

element.style.display = 'none';

上述代码将 display 设置为 'none'，这将隐藏该元素。

显示元素

当需要显示元素时，可以将 display 设置回 'block' 或者 'inline'。

element.style.display = 'block';

将隐藏和显示元素封装成函数

可以将隐藏元素和显示元素封装成函数，方便对这些元素进行操作。以下是一个示例函数：

function hideElement(id: string) {
  const element = doc.getElementById(id);
  element.style.display = 'none';
}

function showElement(id: string) {
  const element = doc.getElementById(id);
  element.style.display = 'block';
}

示例

以下是一个完整的 TypeScript 示例：

const doc = document;

function hideElement(id: string) {
  const element = doc.getElementById(id);
  element.style.display = 'none';
}

function showElement(id: string) {
  const element = doc.getElementById(id);
  element.style.display = 'block';
}

const myButton = doc.getElementById('myButton') as HTMLButtonElement;

myButton.addEventListener('click', (event) => {
  hideElement('myDiv');
});

在上述示例中，当点击 myButton 时，myDiv 隐藏。