Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set an element's display type with JavaScript?

Javascript Web Development Front End Scripts

In JavaScript, you can control an element's visibility and layout behavior by modifying its display property through the DOM. This property accepts various values like block, inline, flex, or none to hide elements completely.

Syntax

element.style.display = "value";

Where value can be block, inline, flex, grid, none, or other CSS display values.

Example: Hiding an Element

You can try to run the following code to set an element's display type with JavaScript:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            width: 250px;
            height: 200px;
            background-color: green;
            color: white;
            padding: 20px;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <button onclick="hideElement()">Hide Element</button>
      <button onclick="showElement()">Show Element</button>
      <div id="myID">
         <h3>Sample Content</h3>
         <p>This element can be hidden or shown using JavaScript display property.</p>
      </div>
      <script>
         function hideElement() {
            document.getElementById("myID").style.display = "none";
         }
         
         function showElement() {
            document.getElementById("myID").style.display = "block";
         }
      </script>
   </body>
</html>

Different Display Values

Here are common display property values you can use:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo-box {
            background-color: lightblue;
            padding: 10px;
            margin: 5px;
            border: 1px solid #333;
         }
      </style>
   </head>
   <body>
      <button onclick="setDisplay('block')">Block</button>
      <button onclick="setDisplay('inline')">Inline</button>
      <button onclick="setDisplay('inline-block')">Inline-Block</button>
      <button onclick="setDisplay('none')">None</button>
      
      <div id="displayDemo" class="demo-box">
         This element's display type changes based on button clicks.
      </div>
      
      <script>
         function setDisplay(displayType) {
            document.getElementById("displayDemo").style.display = displayType;
         }
      </script>
   </body>
</html>

Common Display Values

Value Description Behavior
block Block-level element Takes full width, new line
inline Inline element Only takes necessary width
inline-block Inline with block properties Inline flow but accepts width/height
none Hidden element Element not visible, no space occupied

Key Points

  • Setting display: "none" completely removes the element from the document flow
  • Unlike visibility: hidden, display: none doesn't reserve space for the element
  • You can dynamically switch between different display types based on user interactions
  • Always use getElementById() or other DOM methods to target specific elements

Conclusion

The display property in JavaScript provides powerful control over element visibility and layout. Use display: "none" to hide elements completely, or switch between block, inline, and other values to control layout behavior dynamically.

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements