Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style display Property
The HTML DOM Style display property is used for setting or returning the display type of an element. Elements are mostly block or inline. You can also hide the element using display:none.
Following is the syntax for −
Setting the display property −
object.style.display = value
The above property value is explained as follows −
| Value | Description |
|---|---|
| inline | Fordisplaying the element as inline element i.e. the width and heightproperties will have no effect. |
| block | Theblock element is displayed on new line and takes the whole width. |
| contents | Thisonly displays the child elements and make the parent elementdisappear making the child direct children of the DOM. |
| flex | Displaysan element as a block-level flex container |
| grid | Displaysan element as a block-level grid container |
| inline-block | Sameas inline but now you can apply width and height values. |
| inline-flex | Displaysan element as an inline-level flex container |
| inline-grid | Displaysan element as an inline-level grid container |
| inline-table | Theelement is displayed as an inline-level table |
| list-item | Letthe element behave like a <li> element |
| run-in | Displaysan element as either block or inline, depending on context |
| table | Letthe element behave like a <table> element |
| table-caption | Letthe element behave like a <caption> element |
| table-column-group | Letthe element behave like a <colgroup> element |
| table-header-group | Letthe element behave like a <thead> element |
| table-footer-group | Letthe element behave like a <tfoot> element |
| table-row-group | Letthe element behave like a <tbody> element |
| table-cell | Letthe element behave like a <td> element |
| table-column | Letthe element behave like a <col> element |
| table-row | Letthe element behave like a <tr> element |
| none | Theelement is completely removed |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the display property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding:10px;
background-color:lightblue;
display:flex;
flex-direction:right;
}
#flexSpan{
width:70px;
background-color:red;
margin:20px;
padding:10px;
}
</style>
<script>
function changeDisplay() {
document.getElementById("DIV1").style.display = "block";
document.getElementById("flexSpan").style.display = "block";
document.getElementById("Sample").innerHTML="The display is now changed to block for both the div and its inner Span elements";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>Change the display property of the above div and its inner elements by clicking the below button</p>
<button onclick="changeDisplay()">Change Display</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Display” −
Updated on: 23-Oct-2019
609 Views
Advertisements