資料結構
網路
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.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”，從而隱藏文字。
使用尺寸
這也可以是隱藏任何元素的最簡單方法之一。我們將藉助 height、width、font-size 等引數來最小化元素的尺寸。請記住，在使用尺寸縮小或完全隱藏元素時，使用 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 屬性顯示或隱藏元素。還可以使用此屬性隱藏 <table> 行或列。我們將只使用 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”下的文字已被隱藏，並在網頁上顯示其餘文字。
143 次瀏覽
