javascript display none

JavaScript Display None Property

JavaScript display none Style display property is used to hide and show the content of HTML DOM using JavaScript.

If you want to hide the element, set the style display property to β€œnone”.

document.getElementById("element").style.display = "none";

If you want to show the element, set the style display property to β€œblock”.

document.getElementById("element").style.display = "block";

The user can hide or show the elements according to his wish with the help of JavaScript display property. This process is also known as visibility. If the user sets the property as visibility: none, the entire element will be hidden. Otherwise, on setting the property as visibility: hidden, the elements will become invisible. However, these elements won’t change their original size and position.

Some useful property values in javascript for a better understanding of display concept:

  • block: Element is present at the block level
  • compact: Element can either be block-level or inline which depends on the type of element.
  • flex: This property is only available in CSS3 where the element is considered as block flex level.
  • list-item: Element is subjected to list.
  • none: Elements will not be displayed.
  • inline: This is a default property where the element is referred to as an inline element.
  • table: The element will be a block table which will have a line before and after the table. The syntax can be <table> for definition.
  • table-caption: Element can be a caption of the table.
  • table-cell: Element can be a cell of the table.

JavaScript Online Courses & Certification

The display property sets the element’s display type. The display property is similar to the visibility property.

To set display: none, it hides the complete element with content, while visibility: hidden means that the contents of the element will be invisible but the element covers its size and position.

JavaScript Display none Examples

<html>
<head>
<title>Developer Helps | Display None</title>
</head>
<body>
<p>Click the "Check it" button to check the functionality of display property:</p>

<button onclick="myFun()">Check it</button>

<p id="customPara">
This is custom element.
</p>

<script>
function myFun() {
var custDiv = document.getElementById("customPara");
if (custDiv.style.display === "none") {
custDiv.style.display = "block";
} 
else{
custDiv.style.display = "none";
}
}
</script>
</body>
</html>

Output : (Before Click in Check it button)

Click the "Check it" button to check the functionality of display property:

Check it

This is custom element.

(After Click in Check it button)

Click the "Check it" button to check the functionality of display property:

Check it

Example : (visibility: hidden)

<html>
<head>
<title>Developer Helps | JavaScript Hidden Property</title>
</head>
<body>

<p>Click the "Check it" button to check the functionality of hidden property:</p>
<p id="customPara">This is custom element.</p>

<button type="button" onclick="myFun()">Check it</button>

<script>
function myFun() {
document.getElementById("customPara").style.visibility = "hidden";
}
</script>
</body>
</html>

Output : (Before Click in Check it button)

Click the "Check it" button to check the functionality of hidden property:

This is custom element.

Check it

(After Click in Check it button)

Click the "Check it" button to check the functionality of hidden property:



Check it

Check out My Latest post on Developer Helps for some Interesting Insights


“display” style property in JavaScript

The user has to create some div and assign them an id or class. Then add styling to it.

<div class="circle" id="circle"></div>
<div class="rounded" id="rounded"></div>
<div class="square" id="square"></div>

Width property and height property will set the width and height of the content, border-radius 0% will make a square border, 50% will make a circle and 25% will make a rounded shape and float will make the divs get positioned, margin-right will make them separated with a space at right.

The background color will set the background color of the div.

#circle {
           background-color: #196F3D;
       }
         
#rounded {
           background-color: #5DADE2;
       }
         
#square {
           background-color: #58D68D;
       }

The document.getElementById will select the div with the given id.

<script type="text/javascript">
document.getElementById("circle").onclick = function()

The style.display = “none” will make it disappear when clicked on div.

.style.display = "none";

Thanks for the reading post. I hope you like and understand the post. If you have any doubts regarding this post please comment below.

More Tutorials

Leave a comment

Your email address will not be published. Required fields are marked *