Vlastnost viditelnosti stylu
Příklad
Skrýt obsah prvku <p>:
document.getElementById("myP").style.visibility = "hidden";
Definice a použití
Vlastnost viditelnost nastavuje nebo vrací, zda má být prvek viditelný.
Vlastnost viditelnosti umožňuje autorovi zobrazit nebo skrýt prvek. Je to podobné jako vlastnost display . Rozdíl je však v tom, že pokud nastavíte display:none
, skryje celý prvek, zatímco visibility:hidden
znamená, že obsah prvku bude neviditelný, ale prvek zůstane ve své původní poloze a velikosti.
Podpora prohlížeče
Property | |||||
---|---|---|---|---|---|
visibility | Yes | Yes | Yes | Yes | Yes |
Syntax
Vraťte vlastnost viditelnosti:
object.style.visibility
Nastavte vlastnost viditelnosti:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Hodnoty vlastností
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 |
Technické údaje
Výchozí hodnota: | viditelné |
---|---|
Návratová hodnota: | Řetězec představující, zda je obsah prvku zobrazen nebo ne |
Verze CSS | CSS2 |
Další příklady
Příklad
Rozdíl mezi vlastností zobrazení a vlastností viditelnosti:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Příklad
Přepínání mezi skrytím a zobrazením prvku:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Příklad
Skrýt a zobrazit prvek <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Příklad
Vraťte typ viditelnosti prvku <p>:
alert(document.getElementById("myP").style.visibility);
Související stránky
CSS tutoriál: CSS zobrazení a viditelnost
CSS reference: vlastnost viditelnosti
❮ Objekt stylu