We can also access the visibility property using JavaScript.Now we create a Web page named visibility-js.html to learn how to control visibility of a control using JavaScript. In this web page we have used the code of the visibility.html file and added two buttons.
<!doctype html>
<head>
<title>visibility property using JavaScript </title>
<style>
.visible {
visibility :visible;
}
.hidden{
visibility:hidden;
}
</style>
</head>
<body>
<h1>Working with visibility property using JavaScript</h1>
<H2 id="hide">Hello Dear All</H2>
Click this button to change the visibilty property of the H2 to hidden:<br>
<input type="submit" onClick="document.getElementById('hide').style.visibility='hidden';">
</body>
</html>
The output of the Web page :
We have defined the JavaScript code in the onClick event of the buttons to change the value of the visibility property of the P ELEMENT.
The text of the H2 element is displayed. Click the Submit button to hide the content of the H2 element.
<!doctype html>
<head>
<title>visibility property using JavaScript </title>
<style>
.visible {
visibility :visible;
}
.hidden{
visibility:hidden;
}
</style>
</head>
<body>
<h1>Working with visibility property using JavaScript</h1>
<H2 id="hide">Hello Dear All</H2>
Click this button to change the visibilty property of the H2 to hidden:<br>
<input type="submit" onClick="document.getElementById('hide').style.visibility='hidden';">
</body>
</html>
The output of the Web page :
We have defined the JavaScript code in the onClick event of the buttons to change the value of the visibility property of the P ELEMENT.
The text of the H2 element is displayed. Click the Submit button to hide the content of the H2 element.
No comments:
Post a Comment