Style visibility PropertyStyle Object
Definition and Usage
The visibility property sets or returns whether an element should be visible.
The visibility property allows the author to show or hide an element. It is similar to the display property. However, the difference is that if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
Set the visibility property:
Return the visibility property:
|visible||The element is visible. This is default|
|hidden||The element is not visible, but still affects layout|
|collapse||When used on a table row or cell, the element is not visible (same as "hidden")|
|inherit||The value of the visibility property is inherited from parent element|
The visibility property is supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Hide content of an element:
<p id="p1">This is some text.</p>
<input type="button" onclick="myFunction()" value="Hide paragraph">
Try it yourself »
Thank You For Helping Us!
Your message has been sent to W3Schools.