Javascript Reference - HTML DOM Style display Property








The display property sets or gets the element's display type.

Browser Support

display Yes Yes Yes Yes Yes

Syntax

Return the display property:

var v = object.style.display

Set the display property:

object.style.display=value

Property Values

Value Description
none Not showing the element
box displayed as a block-level flex container box
flex-box displayed as a block-level flex container box
block displayed as a block-level element like paragraphs
flex displayed as a block-level flex container box
inline Default value. displayed as an inline-level element like span
inline-block placed as an inline element on the same line as adjacent content, but it behaves as a block element
inline-flex displayed as an inline-level flex container box
inline-table displayed as an inline-level table
list-item displayed as a list-item
table displayed as a table
table-caption displayed as a table caption
table-cell displayed as a table cell
table-column displayed as a table column
table-column-group displayed as a table column group like
table-footer-group displayed as a table footer row group
table-header-group displayed as a table header row group
table-row displayed as a table row
table-row-group displayed as a table row group
inherit Inherit the display property from the parent element




Technical Details

Default Value: inline
Return Value: A string representing the display type
CSS Version CSS1

Example

The following code shows how to hide a <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--   w w w .jav  a 2s .c o  m-->
    width: 500px;
    height: 500px;
    background-color: lightblue;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">This is my DIV element.</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.display = "none";
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to set the display property and the visibility property.


<!DOCTYPE html>
<html>
<body>
<!-- w  w  w .  j a  v  a2 s . c om-->
<p id="myP1">This is some text.</p>
<p id="myP2">This is some text.</p>

<input type="button" onclick="demoDisplay()" value="Hide with display">
<input type="button" onclick="demoVisibility()" value="Hide with visibility">

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

function demoVisibility() {
    document.getElementById("myP2").style.visibility = "hidden";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows difference between "inline", "block" and "none":


<!DOCTYPE html>
<html>
<body>
<!--from   ww w.j  a va 2  s.c o m-->
<p>this is a test.
<span id="mySpan" style="color:blue;">this span element's</span> display type.</p>

<select onchange="myFunction(this);" size="3">
<option>block
<option>inline
<option>none
</select>

<script>
function myFunction(x) {
    var whichSelected = x.selectedIndex;
    var sel = x.options[whichSelected].text;
    var elem = document.getElementById("mySpan");
    elem.style.display = sel;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the display type of a <p> element.


<!DOCTYPE html>
<html>
<body>
<!--   ww w  .ja  va 2s  .  c o  m-->
<p id="myP" style="display:none;">This is a p element.</p>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myP").style.display);
}
</script>

</body>
</html>

The code above is rendered as follows: