HTML DOM Style display Property

The HTML DOM Style display property is used to set or return the display type of an element. It is similar to the visibility property, which displays or hides the element. With a slight difference in display: none, hiding the entire element, while visibility: hidden meaning only the contents of the element will be invisible, but the element will remain in its original position and size.

Syntax

It returns the display property.

object.style.display

It sets the display property.

object.style.display = value;

Property Values

Property Value	Description
inline	It is the default value. It renders the element as an inline element.
block	It renders the element as a block-level element.
compact	It renders the element as a block-level or inline, depending on the context.
flex	It renders the element as a block-level flex box.
inline-block	It renders the element as a block box inside an inline box.
inline-flex	It renders the element as an inline-level flex box.
inline-table	It renders the element as an inline table.
list-item	It renders the element as a list.
marker	It sets content before or after the box as a marker.
none	It will not display any element.
run-in	It renders the element as block-level or inline, depending on the context.
table	It renders the element as a block table, with a line break before and after the table.
table-caption	It renders the element as a table caption.
table-cell	It renders the element as a table cell.
table-column	It renders the element as a column of cells.
table-column-group	It renders the element as a group of one or more columns.
table-footer-group	It renders the element as a table footer row.
table-header-group	It renders the element as a table header row.
table-row	It renders the element as a table row.
table-row-group	Element is rendered as a group of one or more rows.
initial	It sets the display property to its default value.
inherit	It inherits the display property values from its parent element.

Return Value

It returns a string, representing the display type of the element.

Example 1: This example describes the inline property value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>

<body>
    <h2>
        HTML DOM Style display Property
    </h2>

    <p>
        Click on the button to set
        display property
    </p>

    <div id="GFG">GeeksforGeeks</div>

    <button onclick="myFunction()">
        Click Here!
    </button>

    <!-- script to set display property -->
    <script>
        function myFunction() {
            document.getElementById("GFG").style.display = "inline";
        }
    </script>
</body>

</html>

Output:

HTML-DOM-Style-display-Property

Example 2: This example describes the none property value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>

<body>
    <h2>
        HTML DOM Style display Property
    </h2>

    <p>
        Click on the button to set
        display property
    </p>

    <div id="GFG">GeeksforGeeks</div>

    <button onclick="myFunction()">
        Click Here!
    </button>

    <!-- script to set display property -->
    <script>
        function myFunction() {
            document.getElementById("GFG").style.display = "none";
        }
    </script>
</body>

</html>

Output:

HTML-DOM-Style-display-Property-2

Example 3: This example describes the table-caption property value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>

<body>
    <h2>
        HTML DOM Style display Property
    </h2>

    <p>
        Click on the button to set
        display property
    </p>

    <div id="GFG">Welcome GeeksforGeeks</div>

    <button onclick="myFunction()">
        Click Here!
    </button>

    <!-- script to set display property -->
    <script>
        function myFunction() {
            document.getElementById("GFG").style.display = "table-caption";
        }
    </script>
</body>

</html>

Output:

HTML-DOM-Style-display-Property-3

Example 4: This example describes the block property value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>

<body>
    <h2>
        HTML DOM Style display Property
    </h2>

    <p>
        Click on the button to set
        display property
    </p>

    <div>Welcome <span id="GFG">GeeksforGeeks</span></div>

    <button onclick="myFunction()">
        Click Here!
    </button>

    <!-- script to set display property -->
    <script>
        function myFunction() {
            document.getElementById("GFG").style.display = "block";
        }
    </script>
</body>

</html>

Output:

HTML-DOM-Style-display-Property-4

Supported Browsers

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 4 and above
Firefox 1 and above
Opera 7 and above
Safari 1 and above

Article Tags :

HTML

Web Technologies

HTML-DOM