极客笔记使用CSS隐藏元素的几种不同方式
有时候你可能不想让网站的每个元素都暴露出来。换句话说，你不想让每个页面、帖子、页眉或页脚的模板元素在每次出现时都显示出来。虽然看起来你可能需要每次想要隐藏元素时都更新模板或主题代码，但实际上并不需要这样做。
事实上，只需要使用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>
当上面的程序被执行时，它会在网页上生成一个包含文本和一个点击按钮的输出。当用户点击按钮时，尺寸会减少到零，并且文本会被隐藏起来。
使用visibility属性
不改变文档的布局，可以使用CSS的visibility属性来显示或隐藏元素。使用这个属性也可以隐藏
<
table>的行或列。我们将使用visibility: hidden来隐藏DOM看到的HTML元素，这是最简单的方法之一。
示例
在下面的示例中，我们将使用visibility: 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”的文本已经隐藏，我们无法查看代码中使用的整个内容，并且在网页上显示剩余的文本。