HTML DOM Style display Property Last Updated : 22 Apr, 2024 Comments Improve Suggest changes Like Article Like Report 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. SyntaxIt returns the display property.object.style.displayIt sets the display property.object.style.display = value;Property ValuesProperty Value Description inlineIt is the default value. It renders the element as an inline element.blockIt renders the element as a block-level element.compactIt renders the element as a block-level or inline, depending on the context.flexIt renders the element as a block-level flex box.inline-blockIt renders the element as a block box inside an inline box.inline-flexIt renders the element as an inline-level flex box.inline-tableIt renders the element as an inline table.list-itemIt renders the element as a list.markerIt sets content before or after the box as a marker.noneIt will not display any element.run-inIt renders the element as block-level or inline, depending on the context.tableIt renders the element as a block table, with a line break before and after the table.table-captionIt renders the element as a table caption.table-cellIt renders the element as a table cell.table-columnIt renders the element as a column of cells.table-column-groupIt renders the element as a group of one or more columns.table-footer-groupIt renders the element as a table footer row.table-header-groupIt renders the element as a table header row.table-rowIt renders the element as a table row.table-row-groupElement is rendered as a group of one or more rows.initialIt sets the display property to its default value.inheritIt inherits the display property values from its parent element.Return ValueIt 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: 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: 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: 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: Supported BrowsersGoogle Chrome 1 and aboveEdge 12 and aboveInternet Explorer 4 and aboveFirefox 1 and aboveOpera 7 and aboveSafari 1 and above Comment More infoAdvertise with us R riarawal99 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML DOM Geolocation coordinates Property The DOM Geolocation coordinates Property in HTML is used to return the position and altitude of the device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. Property Values: ValuesDescriptioncoordinates.latitude 2 min read HTML DOM Textarea disabled Property The DOM Textarea disabled Property is used to set or return whether the textarea element would be disabled or not. A disabled text area is un-clickable and unusable. It is a boolean attribute and is used to reflect the HTML Disabled attribute. Syntax: It is used to return the disabled property.texta 2 min read HTML | DOM Input Week Object The Input Week object in HTML DOM represents an <input> element with type = "week" attribute. The element can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the reference of d 3 min read HTML | DOM Style borderImageSource Property The DOM Style borderImageSource Property is used to set or return the image to be used instead of the styles given by the border-style property. Syntax: To get the borderImageSource propertyobject.style.borderImageSourceTo set the borderImageSource propertyobject.style.borderImageSource = "none | im 3 min read HTML | DOM Progress max Property The DOM Progress max Property is used to set or return the value of the max attribute of an <progress> element. The max attribute represents the total work is to be done for completing a task. Syntax: It is used to return the progress max property. progressObject.maxIt is used to set the progr 2 min read HTML | DOM Textarea autofocus Property The DOM Textarea autofocus Property is used to set or return whether the element should get focus when the page loads. This property is used to reflect the HTML autofocus attribute. Syntax: It is used to Return the autofocus property. textareaObject.autofocusIt is used to Set the autofocus property. 2 min read HTML | DOM ClipboardEvent The ClipboardEvent refers to all the events which occur when the clipboard is modified. All the properties and methods are inherited from the ‘Event Object’. There are 3 main ClipboardEvents:oncopyoncutonpasteReturn Value: It returns an object containing the data affected by the clipboard operation. 1 min read HTML | DOM Input Range Object The Input Range Object in HTML DOM is used to represent the HTML < input > element with type="range". This object is used to access or create the <input> element. This element can be accessed by using getElementById() method. Syntax: document.getElementById("Input_ID"); This Input_ID is 2 min read HTML | DOM Window closed Property The Window closed property in HTML DOM is used to return a value that indicates whether the referred window is closed or not. Syntax: window.close() Return Value: A Boolean value, true if window is closed otherwise false. Example: HTML <!DOCTYPE html> <html> <head> <title> HT 1 min read HTML | DOM Style textAlignLast Property The Style textAlignLast property in HTML DOM is used to set the alignment of the last line of the text. Syntax: Return the textAlignLast property: object.style.textAlignLast Set the textAlignLast property: object.style.textAlignLast = "auto | left | right | center | justify | start | end | initial | 2 min read Like