通过 display 属性隐藏或显示 HTML 中的元素

在 Web 开发中，您会经常需要隐藏或显示 HTML 元素。这可以通过在 CSS 中使用 display 属性来实现。本文将介绍这一属性的使用方法以及示例。

display 属性

display 属性是一个用来控制元素布局的 CSS 属性。它的值决定了元素在屏幕上是如何显示的。以下是几个常用的 display 属性值：

• none: 元素不可见，不占用空间。
• block: 元素会以块级元素的形式显示。
• inline: 元素会以行内元素的形式显示。
• inline-block: 元素会以行内块级元素的形式显示。

隐藏元素

要隐藏一个元素，可以使用 display: none 属性值。以下是示例代码：

<div id="hideMe">我要被隐藏！</div>

#hideMe {
  display: none;
}

此代码将会隐藏包含 "我要被隐藏！" 文本的 div 元素。在文档中，它不再占用任何空间。

显示元素

如果您需要显示一个之前已经被隐藏的元素，可以将其 display 属性设置为 block、inline 或 inline-block：

#hideMe {
  display: block; /* 或 inline 或 inline-block */
}

这将会在页面中显示该元素。

切换元素的可见性

有时您可能会需要切换元素的可见性。这可以通过 JavaScript 来实现。例如，以下代码片段可以在单击按钮时切换元素的可见性：

<div id="button">点击切换元素可见性</div>
<div id="toggleMe">我将被切换可见性！</div>

#toggleMe {
  display: none;
}

const button = document.getElementById("button");
const toggleMe = document.getElementById("toggleMe");

button.addEventListener("click", function() {
  if (toggleMe.style.display === "none") {
    toggleMe.style.display = "block"; /* 或 inline/block */
  } else {
    toggleMe.style.display = "none";
  }
});

此代码将会在单击按钮时切换 toggleMe 元素的可见性。

总结

display 属性是一种让您可以轻松控制 HTML 元素可见性的方式。它是 Web 开发中非常有用的一个 CSS 属性，您应该熟悉它的使用方法。