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 display property in Javascript. This process is also known as visibility. If the user will set 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.
  • table-column: the element can be referred to as a column of the table.

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

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 Related Post

More Tutorials

Leave a comment

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