Widoczność stylu Właściwość
Przykład
Ukryj zawartość elementu <p>:
document.getElementById("myP").style.visibility = "hidden";
Definicja i użycie
Właściwość widoczności ustawia lub zwraca, czy element powinien być widoczny.
Właściwość widoczności umożliwia autorowi pokazanie lub ukrycie elementu. Jest podobny do właściwości wyświetlania . Różnica polega jednak na tym, że jeśli ustawisz display:none, ukryje on cały element, a visibility:hiddenoznacza to, że zawartość elementu będzie niewidoczna, ale element pozostanie w swojej pierwotnej pozycji i rozmiarze.
Obsługa przeglądarki
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Składnia
Zwróć właściwość widoczności:
object.style.visibility
Ustaw właściwość widoczności:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Wartości nieruchomości
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Szczegóły techniczne
| Domyślna wartość: | widoczny |
|---|---|
| Wartość zwrotu: | String, reprezentujący, czy zawartość elementu jest wyświetlana, czy nie |
| Wersja CSS | CSS2 |
Więcej przykładów
Przykład
Różnica między właściwością wyświetlania a właściwością widoczności:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Przykład
Przełącz między ukrywaniem a pokazywaniem elementu:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Przykład
Ukryj i pokaż element <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Przykład
Zwróć typ widoczności elementu <p>:
alert(document.getElementById("myP").style.visibility);
Powiązane strony
Samouczek CSS: wyświetlanie i widoczność CSS
Odniesienie CSS: właściwość widoczności
❮ Obiekt stylu