CSS visibility-Eigenschaft
Die visibility-Eigenschaft wird verwendet, um festzulegen, ob ein Element für den Benutzer sichtbar oder versteckt sein soll.
Sie kann folgende Werte annehmen: visible, hidden und collapse.
Wenn das Element auf „hidden“ gesetzt ist, wird der Inhalt dieses Tags vollständig transparent, behält aber seinen ursprünglichen Platz im Layout bei. Kindelemente des versteckten Elements können sichtbar sein, wenn visibility: visible auf sie angewendet wird.
Wenn der Wert der visibility-Eigenschaft auf „collapse“ gesetzt ist, wird er mit tabellenbezogenen Elementen (wie Zeilen, Spalten und Zellen) verwendet, um diese aus dem Layout zu entfernen, während die Tabellenstruktur erhalten bleibt.
Achtung
Einige Browser verwenden den Wert „collapse“ nicht.
| Anfangswert | visible |
|---|---|
| Gilt für | Alle Elemente (collapse gilt nur für tabellenbezogene Elemente). |
| Vererbbar | Ja. |
| Animierbar | Ja. |
| Version | CSS2 |
| DOM-Syntax | Object.style.visibility = "collapse"; |
Syntax
Syntax der CSS visibility-Eigenschaft
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Beispiel für die visibility-Eigenschaft mit dem Wert „hidden“:
Beispiel für die CSS visibility-Eigenschaft mit dem Wert hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Ergebnis
Beispiel für die visibility-Eigenschaft mit den Werten „visible“ und „hidden“:
Beispiel für die CSS visibility-Eigenschaft mit den Werten visible und hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Beispiel für die visibility-Eigenschaft mit dem Wert „collapse“:
Beispiel für die CSS visibility-Eigenschaft mit dem Wert collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| visible | Das Element ist in diesem Fall sichtbar. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| hidden | Dieser Wert blendet die Elemente nur visuell aus. | Ausführen » |
| collapse | Wird mit bestimmten Tabellenelementen (Zeilen, Zeilengruppen, Spalten, Spaltengruppen) verwendet, um ganze Zeilen oder Spalten zu entfernen. Dieser Wert hat bei anderen Elementen die gleiche Bedeutung wie „hidden“. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. | |
| revert | Setzt die Eigenschaft auf ihren vererbten oder ursprünglichen Wert zurück, je nachdem, was zutrifft. | Ausführen » |
| revert-layer | Setzt die Eigenschaft auf den Wert zurück, der in der vorherigen Ebene des Cascading festgelegt wurde. | Ausführen » |
Praxis
Welche möglichen Werte kann die CSS-Eigenschaft 'visibility' annehmen?