Set a <div> element to not be displayed:
document.getElementById("myDIV").style.display = "none";
Click the button to set the display property of the DIV element to "none":
<!DOCTYPE html> <html> <head> <style> #myDIV {//from w w w.j a va 2 s . 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 display property sets or gets the element's display type.
Elements in HTML are mostly "inline" or "block" elements:
The display property allows us to show or hide an element, which is similar to the visibility property.
Setting display:none hides the entire element.
visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
If an element is a block element, its display type can be changed with the float property.
Property Values
| Value | Description |
|---|---|
| block | a block-level element |
| compact | a block-level or inline element. Depends on context |
| flex | a block-level flex box. New in CSS3 |
| inline | an inline element. default |
| inline-block | a block box inside an inline box |
| inline-flex | a inline-level flex box. New in CSS3 |
| inline-table | an inline table, with no line break before or after the table |
| list-item | a list |
| marker | This value sets content before or after a box to be a marker. This value can be used with :before and :after pseudo-elements. Otherwise this value is identical to "inline". |
| none | Element will not be displayed |
| run-in | block-level or inline element. Depends on context |
| table | a block table, with a line break before and after the table |
| table-caption | a table caption |
| table-cell | a table cell |
| table-column | a column of cells |
| table-column-group | a group of one or more columns |
| table-footer-group | a table footer row |
| table-header-group | a table header row |
| table-row | a table row |
| table-row-group | a group of one or more rows |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The display property returns a String representing the display type of an element.