document.getElementById("element").style.display = "none";
document.getElementById("element").style.visibility = "none";
<!DOCTYPE html>
<html>
<head>
<title>
style.display
</title>
</head>
<body>
<p>
Welcome to the bianchenghao6.com
</p>
<p>
Example of the JavaScript's style.display property
</p>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p id = "p"> This is a paragraph element. </p>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.display = "none";
document.getElementById("p").style.display = "none";
}
</script>
</body>
</html>
Welcome to the bianchenghao6.com
Example of the JavaScript's style.display property
This is a paragraph element.
<!DOCTYPE html>
<html>
<head>
<title>
style.visibility
</title>
</head>
<body>
<p>
Welcome to the bianchenghao6.com
</p>
<p>
Example of the JavaScript's style.visibility property
</p>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p id = "p"> This is a paragraph element. </p>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("p").style.visibility = "hidden";
}
</script>
</body>
</html>
Welcome to the bianchenghao6.com
Example of the JavaScript's style.visibility property
This is a paragraph element.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript hide elements
</title>
</head>
<body>
<p>
Welcome to the bianchenghao6.com
</p>
<p>
Using both style.visibility and style.display properties
</p>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p> This is a paragraph element. </p>
<b id = "heading"> This is the heading after the paragraph element. </b>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("heading").style.display = "none";
}
</script>
</body>
</html>
Welcome to the bianchenghao6.com
Using both style.visibility and style.display properties
This is a paragraph element.
This is the heading after the paragraph element.