Javascript DOM CSS Style visibility Property

Introduction

Hide the content of a <p> element: 

document.getElementById("myP").style.visibility = "hidden";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<p id="myP">This is a p element.</p>

<button type="button" onclick="myFunction()">Hide content of p</button>

<script>
function myFunction() {//from ww w .j  a va  2 s  .  co  m
  document.getElementById("myP").style.visibility = "hidden";
}
</script>

</body>
</html>

The visibility property sets or gets whether an element should be visible.

If you set display:none, it hides the entire element and the element is removed from the page flow.

The visibility:hidden hides element but the element stays in its original position and size.

Property Values

ValueDescription
visible The element is visible. 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")
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The visibility property return a String representing whether the content of an element is displayed.




PreviousNext

Related