In JavaScript, elements can be concealed by utilizing either the style.display or the style.visibility properties. The visibility attribute is another method available in JavaScript for rendering an element invisible. The distinction between using style.display and style.visibility lies in their behavior: when visibility is set to hidden, the element is invisible, yet it still occupies space in the layout. Conversely, when display is set to none, the element is not only hidden but also does not reserve any space on the webpage.
In HTML, the hidden attribute can be utilized to conceal a specific element. When this hidden attribute is assigned a value of true, the element becomes invisible; conversely, if the value is set to false, the element remains visible.
Syntax
The standard syntax for concealing an element through the use of style.hidden and style.visibility is outlined below.
Using style.hidden
document.getElementById("element").style.display = "none";
Using style.visibility
document.getElementById("element").style.visibility = "none";
Next, let’s examine a few examples to grasp the concept of concealing elements in JavaScript.
Example1
In this demonstration, we will explore the method of eliminating elements by utilizing the style.display property in JavaScript. In this scenario, there exists a div element alongside a paragraph element that becomes hidden when the specified HTML button is clicked. To observe this effect, you need to click the 'Click me!' button.
Output
After the execution, the output will be -
On clicking the button, the output will be -
Example2
In this demonstration, we will explore the method of concealing elements through the use of JavaScript's style.visibility property. In this scenario, both a div element and a paragraph element will be rendered invisible, while still maintaining their allocated space within the layout.
To observe the effect, we need to press the 'Click me!' button.
<!DOCTYPE html>
<html>
<head>
<title>
style.visibility
</title>
</head>
<body>
<h1>
Welcome to the logic-practice.com
</h1>
<h2>
Example of the JavaScript's style.visibility property
</h2>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p id = "p"> This is a paragraph element. </p>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("p").style.visibility = "hidden";
}
</script>
</body>
</html>
Output
Upon running the aforementioned code, the resulting output is -
On clicking the button, the output will be -
Example3
In this demonstration, we will explore the distinctions between the style.display and style.visibility properties in JavaScript. In this scenario, we have a div element along with a <h3> heading element, where we will implement these properties. We will conceal the div element using the style.display property, while the <h3> element will be hidden through the application of the style.visibility property.
To observe the effect, we need to select the 'Click me!' button.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript hide elements
</title>
</head>
<body>
<h1>
Welcome to the logic-practice.com
</h1>
<h2>
Using both style.visibility and style.display properties
</h2>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p> This is a paragraph element. </p>
<h3 id = "heading"> This is the heading after the paragraph element. </h3>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("heading").style.display = "none";
}
</script>
</body>
</html>
Output
In the output, it is evident that the div element, to which we have assigned the style.visibility property, is concealed yet continues to occupy space within the layout. Conversely, the heading element, where we have utilized the style.display property, is not only hidden but also does not reserve any space in the document flow.
After clicking the button, the result will be -