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 display property sets the element’s display type. 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 doubt regarding this post please comment below.

More Related Post

Leave a comment

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

0 0 0
FOLLOW ON