HTML DOM Style visibility Property
THE WORLD'S LARGEST WEB DEVELOPER SITE

Style visibility Property

❮ Style Object

Example

Hide the content of a <p> element:

document.getElementById("myP").style.visibility = "hidden";
Try it Yourself »

Definition and Usage

The visibility property sets or returns whether an element should be visible.

The visibility property allows the author to show or hide an element. It is similar to the display property. However, the difference is that if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.


Browser Support

Property
visibility Yes Yes Yes Yes Yes

Syntax

Return the visibility property:

object.style.visibility

Set the visibility property:

object.style.visibility = "visible|hidden|collapse|initial|inherit"

Property Values

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


Technical Details

Default Value: visible 
Return Value: A String, representing whether the content of an element is displayed or not
CSS Version CSS2

More Examples

Example

Difference between the display property and the visibility property:

function demoDisplay() {
    document.getElementById("myP1").style.display = "none";
}

function demoVisibility() {
    document.getElementById("myP2").style.visibility = "hidden";
}
Try it Yourself »

Example

Toggle between hiding and showing an element:

function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.visibility === 'hidden') {
        x.style.visibility = 'visible';
    } else {
        x.style.visibility = 'hidden';
    }
}
Try it Yourself »

Example

Hide and show an <img> element:

function hideElem() {
    document.getElementById("myImg").style.visibility = "hidden";
}

function showElem() {
    document.getElementById("myImg").style.visibility = "visible";
}
Try it Yourself »

Example

Return the visibility type of a <p> element:

alert(document.getElementById("myP").style.visibility);
Try it Yourself »

Related Pages

CSS tutorial: CSS Display and visibility

CSS reference: visibility property


❮ Style Object