The Style visibility property in HTML DOM used to set the visibility for an element. It is used to hide or show the element. It returns the visibility property that is given to an element.
Syntax:
- It returns the visibility property.
object.style.visibility
- It is used to set the visibility property.
object.style.visibility = "visible | hidden | collapse | initial | inherit"
Property Values:
- visible: It is used to specify the element to be visible. It is a default value.
- hidden: Element is not visible, but it affects layout.
- collapse: It hides the element when it is used on a table row or a cell.
- initial: It sets the visibility property to its default value.
- inherit: This property is inherited from its parent element.
Return Value: It returns a string representing the content to be displayed or not for an element.
Example-1:
html
<!DOCTYPE html><html>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style visibility Property </h2>
<p id="gfg"> A Computer science portal for geeks</p>
<button type="button" onclick="geeks()">
Change visibility
</button>
<script>
function geeks() {
document.getElementById(
"gfg").style.visibility = "hidden";
}
</script>
</center>
</body>
</html>
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example-2:
html
<!DOCTYPE html><html>
<body>
<center>
<h1 style="color:green;;">
GeeksForGeeks
</h1>
<h2>DOM Style visibility Property </h2>
<p id="gfg" style="visibility:hidden;">
A Computer science portal for geeks</p>
<button type="button" onclick="geeks()">
Change visibility
</button>
<p id="y"></p>
<script>
function geeks() {
var x = document.getElementById(
"gfg").style.visibility;
document.getElementById('y').innerHTML = x;
}
</script>
</center>
</body>
</html>
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
Supported Browsers: The browser supported by DOM Style visibility property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 4 and above
- Apple Safari 1 and above