資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中 display: none; 和 visibility: hidden; 的區別
在應用程式中，有時您希望隱藏某些元素（即，從 DOM 中移除它們，但將其保留在螢幕上）。您可以透過多種方法實現此目的。使用 visibility 屬性和 hidden 值(visibility:hidden;) 或使用 display 屬性和 none 值 (display:none;) 是兩種常見的方法。
這兩種方法都能使元素隱藏，但它們對元素行為的影響不同。在本文中，我們將瞭解 display:none; 和 visibility:hidden; 之間的區別。
CSS visibility:hidden
此 CSS 屬性將導致元素佔據螢幕空間，即使它從檢視中隱藏。這意味著元素之前和之後的內容將被渲染，但隱藏的元素仍然佔據完全相同的空間。即使它沒有顯示在螢幕上並佔用空間，HTML 元素仍然存在於 DOM 中。
語法
以下是 CSS visibility 屬性的語法：
visibility: visible| hidden | collapse | initial | inherit;
示例
讓我們看下面的示例，我們將使用 CSS visibility:hidden 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
display: flex;
gap: 20px;
}
.x {
height: 100px;
width: 150px;
font-size: 30px;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.x1 {
background-color: #E8DAEF;
}
.x2 {
background-color: #DFFF00;
visibility: hidden;
}
.x3 {
background-color: #CCCCFF;
}
</style>
</head>
<body style="background-color:#EAFAF1">
<div class="tp">
<div class="x1 x">A</div>
<div class="x2 x">B</div>
<div class="x3 x">C</div>
</div>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，該輸出包含一個 div 盒子，其中一個應用了 CSS visibility 屬性，並在網頁上顯示。
CSS display:none
但是，display: none 透過從螢幕中隱藏元素來完成類似的任務。在這種情況下，它不會留下任何空間，並且行為會給人一種帶有此屬性的元素不存在的印象。儘管此屬性對其沒有影響，但該元素仍然存在於 DOM 中。元素只是隱藏在 DOM 中。此 CSS 屬性不能用於從 DOM 中移除元素。
語法
以下是 CSS display 屬性的語法：
display: none | inline | block | inline-block;
示例
在下面的示例中，我們將使用 CSS display:none 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
padding: 50px;
width: max-content;
display: flex;
border: 1px solid #DE3163;
}
.x {
height: 50px;
width: 130px;
}
.x1 {
background-color: #DFFF00;
margin-right: 30px;
}
.x2 {
background-color: #229954;
margin-right: 30px;
display: none;
}
.x3 {
background-color: #212F3D;
}
</style>
</head>
<body style="background-color:#F4ECF7">
<div class="tp">
<div class="x1 x"></div>
<div class="x2 x"></div>
<div class="x3 x"></div>
</div>
</body>
</html>
執行以上程式碼後，將彈出輸出視窗，顯示一個 div 盒子，其中一個應用了 display 屬性，並在網頁上顯示。
.
更新於： 2024年1月8日
814 次檢視
廣告