Javascript Display None Property
Published in
1 min readAug 5, 2020
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. 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 itThis is custom element.
For More Example: Javascript Display None Property
Read More
Java Bitwise operators
Logical operators in Java with Example [2020]
Collections in Java
Singleton Class in Java
