HTML - DOM Style Object visibility Property

Quiz

HTML DOM Style Object visibility property is used for setting or returning whether an element should be visible or not. It is similar to display property, but the difference is that with display:none, it hides the entire element whereas in visibility:hidden, the elements are only invisible and elements are still present on their original position.

Syntax

Set the visibility property:

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

Get the visibility property:

object.style.visibility;

Property Values

Value	Description
visible	It is the default value which specifies elements to be visible.
hidden	It specifies elements to be hidden that is elements are invisible but still present.
collapse	It hides the element when used on table row or cell. It is similar to hidden property.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents whether to display the content or not.

Examples of HTML DOM Style Object 'visibility' Property

The following example sets and gets the visibility property of p element.

Set visibility Property of p Element

The following example sets the visibility property of p element to hidden, visible and collapse.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object visibility Property
    </title>
</head>
<body>
    <p>
        Click to set visibility property.
    </p>
    <button onclick="fun()">Hide</button>
    <button onclick="funTwo()">Visible</button>
    <button onclick="funThree()">Collapse</button>
    <br><br>
    <p id="vis">
        Welcome to Tutorials Point.
    </p>
    <script>
        function fun() {
            document.getElementById("vis")
                .style.visibility = "hidden";
        }
        function funTwo() {
            document.getElementById("vis")
                .style.visibility = "visible";
        }
        function funThree() {
            document.getElementById("vis")
                .style.visibility = "collapse";
        }
    </script>
</body>
</html>

Get visibility Property of p Element

The following example gets the visibility property of p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object visibility Property
    </title>
</head>
<body>
    <p>
        Click to set visibility property.
    </p>
    <button onclick="fun()">Hide</button>
    <button onclick="funTwo()">Visible</button>
    <button onclick="funThree()">Collapse</button>
    <br><br>
    <p id="vis">
        Welcome to Tutorials Point.
    </p>
    <p id="res"></p>
    <script>
        function fun() {
            let x=document.getElementById("vis")
                .style.visibility = "hidden";
            document.getElementById("res")
                .innerHTML="Visibility: " +x;
        }
        function funTwo() {
            let x=document.getElementById("vis")
                .style.visibility = "visible";
            document.getElementById("res")
                .innerHTML="Visibility: " +x;
        }
        function funThree() {
            let x=document.getElementById("vis")
                .style.visibility = "collapse";
            document.getElementById("res")
                .innerHTML="Visibility: " +x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
visibility	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page