CodesJava

Easy learning with example program codes

CSS Visibility

To specify an element to be visible or invisible, the CSS Visibility property is used. Both the invisible and invisible elements take up space on a web page. To create an invisible element with no space taken, the display property can be used.

Syntax:

visibility: visible|hidden|collapse|initial|inherit;

Parameters:

  • visible: It is used to define an element to be visible.
  • hidden: It is used to define an element as invisible.
  • collapse: For a table element, this parameter eliminates a row or a column. The table layout is however not affected. For other elements, this parameter renders as “hidden”.
  • initial: To set this property to its default value, the “initial” parameter is utilized.
  • inherit: To inherit this property from its parent element, the “inherit” parameter is utilized.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h3.visible {  
    visibility: visible  
}  
h3.invisible {  
    visibility: hidden  
}  
</style>  
</head>  
<body>  
<h3 class="visible">Hello</h1>  
<h3 class="invisible">World!!</h1>  
</body>  
</html>

Output:

Explanation:

In the above example, we displayed the use of the CSS visibility property.

JavaScript Syntax:

object.style.visibility="hidden"

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div {  
    margin: auto;  
    padding:10px;
    background-color: crimson;
    color: white;
    text-align: center;
    border: 5px solid brown;  
}  
</style>  
</head>  
<body>  
<p>Click the button to see the effect.</p>  
<button onclick="myFunction()">Click Me</button><br><br>  
<div id="div">Hello World!!</div>  
<script>  
function myFunction() {  
    document.getElementById("div").style.visibility = "hidden";  
}  
</script>  
</body>  
</html>

Output:

Explanation:

The above is a javascript example.

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status