使用 CSS 隐藏元素的不同方法

cssweb developmentfront end technology更新于 2025/3/21 11:24:17

有些情况下，您根本不想让网站的每个元素都暴露出来。换句话说，您不希望页面、文章、页眉或页脚的每个模板元素每次出现时都显示出来。虽然每次想要隐藏元素时，您似乎都需要更新模板或主题代码，但事实并非如此。

事实上，仅使用 CSS，您就可以快速隐藏网站的某些部分。这其实并不难。让我们深入研究这篇文章，更好地了解使用 CSS 隐藏元素的不同方法。

使用position: absolute;

当我们在 CSS 中为元素使用"position: absolute"属性时，它只是表示元素的位置固定在其父容器上;如果没有提供容器，则文档主体将用作元素的父容器。此时，我们可以使用 Top、Bottom、Left 和 Right 属性来移动元素。为了使元素保持在文档主体之外，我们将使用其中一个特性。

示例

以下示例将使用 CSS 的position: absolute属性来隐藏元素。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <style>
      body {
         background-color: #D5F5E3;
      }

      h1 {
         font-size: 100px;
         color: #DE3163;
         position: absolute;
      }

      p {
         color: black;
      }

      h1.hide {
         left: -999px;
      }
   </style>
</head>
<body>
   <p>Click The Buttton To Hide Text</p>
   <button id="button">Hide</button>
   <div class="textbox">
      <h1>WELCOME</h1>
   </div>
   <script>
      $("#button").click(function() {
         $("h1").addClass("hide");
      });
   </script>
</body>
</html>

运行上述代码后，输出窗口将弹出，在网页上显示文本和按钮。当用户想要隐藏文本并点击按钮时，事件会被触发并隐藏文本。

使用不透明度

要为元素添加透明效果，我们可以简单地使用 CSS 中的 opacity 属性。我们将使用 0 到 1 之间的不透明度值，或 0% 到 100% 之间的百分比。但是，在本例中，我们将使用 opacity(0) 或 opacity(0%) 来完全隐藏或使元素透明。

示例

在下面的示例中，我们将使用 opacity 为"0"来隐藏元素。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <style>
      h1 {
         font-size: 90px;
         color: #239B56;
      }

      p {
         color: black;
      }

      h1.hide {
         opacity: 0;
      }
   </style>
</head>
<body>
   <p>Click The Button To Apply Opacity To '0'</p>
   <button id="button">Click</button>
   <div class="textbox">
      <h1>TutorialsPoint</h1>
   </div>
   <script>
      $("#button").click(function() {
         $("h1").addClass("hide");
      });
   </script>
</body>
</html>

运行上述代码后，输出窗口将弹出，显示文本以及网页上的点击按钮。当用户点击按钮时，将触发事件并将不透明度更改为"0"，从而隐藏文本。

使用测量值

这也是隐藏任何元素最简单的方法之一。我们将借助高度、宽度、字体大小等参数来最小化元素的尺寸。使用尺寸缩小或完全隐藏元素时，请记住使用 overflow: hidden 属性，这样元素的全部内容都会被隐藏。

示例

请考虑以下示例，我们将使用 CSS 隐藏元素

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <style>
      body {
         background-color: #D2B4DE;
      }

      h1 {
         font-size: 100px;
         color: #DE3163;
      }

      p {
         color: black;
      }

      h1.hide {
         height: 0px;
         width: 0px;
         overflow: hidden;
      }
   </style>
</head>
<body>
   <p>Click Button To Reduce It's Dimensions To Zero</p>
   <button id="button">Hide</button>
   <div>
      <h1>HELLO</h1>
   </div>
   <script>
      $("#button").click(function() {
         $("h1").addClass("hide");
      });
   </script>
</body>
</html>

上述程序执行后，将在网页上生成一个包含文本和点击按钮的输出。当用户点击按钮时，尺寸会缩小为零，文本也会被隐藏。

使用可见性

无需更改文档布局，即可使用 CSS 的 visibility 属性显示或隐藏元素。的行或列也可以使用此属性隐藏。我们将使用 visibility: hidden。这是隐藏 DOM 元素使其不被 HTML 元素看到的最简单方法之一。

示例

在下面的示例中，我们将使用 visbility:hidden 来隐藏元素。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <style>
      h1.hidden {
         visibility: hidden;
      }
   </style>
</head>
<body style="background-color:#ABEBC6">
   <h1>TUTORIALSPOINT</h1>
   <h1 class="hidden">The Best E-Way Learning</h1>
   <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>

运行上述代码后，输出窗口会弹出，显示网页上的文本。但是我们无法查看代码中使用的全部内容，因为设置了 visibility: hidden 的文本已被隐藏，并显示了网页上的剩余文本。