HTML - DOM Style Object display Property

Quiz

HTML DOM Style Object display property sets or returns the display type of an element. It is similar to visibility 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 display property:

object.style.display= value;

Get the display property:

object.style.display;

Property Values

Value	Description
inline	It is the default value which displays an element as an inline element.
block	It displays an element as a block-level element.
compact	It displays an element as a block-level or inline, depending on the context.
flex	It displays an element as a block-level flex box.
inline-block	It displays an element as a block box inside an inline box.
inline-flex	It displays an element as an inline-level flex box.
inline-table	It displays an element as an inline table.
list-item	It displays an element as a list.
marker	It is used with :before and :after CSS pseudo elements. It sets the content before or after a box to be a marker.
none	It does not display any element.
run-in	It displays an element as block-level or inline, depending on the context.
table	It displays an element as a block table, with a line break before and after the table.
table-caption	It displays an element as a table caption.
table-cell	It displays an element as a table cell.
table-column	It displays an element as a column of cells.
table-column-group	It displays an element as a group of one or more columns.
table-footer-group	It displays an element as a table footer row.
table-header-group	It displays an element as a table header row.
table-row	It displays an element as a table row.
table-row-group	It displays an element as a group of one or more rows.
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 display type of an element.

Examples of HTML DOM Style Object 'display' Property

The following examples illustrates different property values of display property.

Set Display Property

In this example we have set the display property value to 'inline' 'block' and 'none'./p>

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #display {
            height: 400px;
            width: 400px;
            background-color: blanchedalmond;
        }
    </style>
    <title>
        HTML DOM Style Object display Property
    </title>
</head>
<body>
    <p>Click to change display style</p>
    <button onclick="fun()">Inline</button>
    <button onclick="funTwo()">Block</button>
    <button onclick="funThree()">None</button>
    <br>
    <div id="display">
        Welcome to TutorialsPoint..
    </div>
    <script>
        function fun() {
            document.getElementById("display")
                .style.display = "inline";
        }
        function funTwo() {
            document.getElementById("display")
                .style.display = "block";
        }
        function funThree() {
            document.getElementById("display")
                .style.display = "none";
        }
    </script>
</body>
</html>

Get Display Property

In this example we have used two display property value which are 'table-caption' and 'none' as well as we are getting the name of the property value used.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #display {
            height: 400px;
            width: 400px;
            background-color: blanchedalmond;
        }
    </style>
    <title>
        HTML DOM Style Object display Property
    </title>
</head>
<body>
    <p>Click to change display style</p>
    <button onclick="funThree()">Table Caption</button>
    <button onclick="funTwo()">None</button>
    <br>
    <div id="display">
        Welcome to <span id="cap">TutorialsPoint</span>
    </div>
    <p id="output"></p>
    <script>
        function funThree() {
            let x=document.getElementById("cap")
                .style.display = "table-caption";
            document.getElementById("output").innerHTML=x
        }
        function funTwo() {
            let x=document.getElementById("display")
                .style.display = "none";
            document.getElementById("output").innerHTML=x
        }        
    </script>
</body>
</html>

Supported Browsers

Property
display	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page