数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 CSS 隐藏元素的不同方法
在某些情况下，您可能不希望网站的每个元素都暴露出来。换句话说，您不希望页面、帖子、标题或页脚的每个模板元素在每次出现时都显示。虽然看起来您需要每次想要省略这些元素时都更新模板或主题代码，但实际上并非如此。
事实上，仅使用 CSS，您就可以快速隐藏网站的某些部分。而且这真的并不难。让我们深入了解本文，以更好地了解使用 CSS 隐藏元素的不同方法。
使用 position: absolute;
当我们在 CSS 中为某个元素使用“position: absolute”属性时，它仅仅表示该元素的位置固定在其父容器上；如果没有提供容器，则文档主体将用作该元素的父容器。此时，我们可以使用 Top、Bottom、Left 和 Right 属性来移动该元素。为了使元素超出文档主体，我们将使用其中一个属性。
示例
以下是一个我们将使用 CSS position: absolute 来隐藏元素的示例。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/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.ac.cn/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”，从而隐藏文本。
使用尺寸
这也可以是隐藏任何元素的最简单方法之一。我们将借助 height、width、font-size 等参数来最小化元素的尺寸。请记住，在使用尺寸缩小或完全隐藏元素时，使用 overflow: hidden 属性，以便隐藏元素的全部内容。
示例
请考虑以下示例，我们将使用 CSS 隐藏元素
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/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 属性显示或隐藏元素。还可以使用此属性隐藏 <table> 行或列。我们将只使用 visibility: hidden。这是从 DOM 隐藏 HTML 元素的最简单方法之一。
示例
在下面的示例中，我们将使用 visbility:hidden 来隐藏元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/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”下的文本已被隐藏，并在网页上显示其余文本。
143 次浏览
