CSS display none|极客教程

CSS display none

在网页开发中，display: none 是一个常用的 CSS 属性，用于隐藏元素。当一个元素的 display 属性设置为 none 时，该元素将不会在页面上显示，也不会占据任何空间。这在很多情况下都非常有用，比如在实现一些交互效果、动画效果或者在响应式设计中隐藏某些元素。

基本用法

下面是一个简单的示例，演示如何使用 display: none 隐藏一个元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<div class="hidden">
  This is a hidden element.
</div>

</body>
</html>

在上面的示例中，我们定义了一个类名为 hidden 的元素，并将其 display 属性设置为 none，这样这个元素就会被隐藏起来。

示例代码

示例 1：隐藏一个段落

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<p class="hidden">This is a hidden paragraph.</p>

</body>
</html>

示例 2：隐藏一个图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<img src="https://www.geek-docs.com/image.jpg" class="hidden" alt="Geek Docs">

</body>
</html>

示例 3：隐藏一个按钮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<button class="hidden">Click Me</button>

</body>
</html>

JavaScript 控制显示与隐藏

除了使用 CSS 的 display: none 属性来隐藏元素外，我们还可以通过 JavaScript 来控制元素的显示与隐藏。下面是一个示例，演示如何通过 JavaScript 来切换一个元素的显示状态：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<button onclick="toggleElement()">Toggle Element</button>
<div id="toggle" class="hidden">
  This is a toggleable element.
</div>

<script>
function toggleElement() {
  var element = document.getElementById("toggle");
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}
</script>

</body>
</html>

代码运行结果:

CSS display none