JavaScript display and hide pictures for your reference. The specific contents are as follows
Click the button to display and hide the picture (displayed by default), and attach the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title > show and hide pictures < / Title >
</head>
<body>
< button > Hide < / button >
<br>
<img src="img/image01.jfif">
<script type="text/javascript">
// 1. Get event source
var obtn = document.getElementById("btn");
var newImg = document.getElementsByTagName("img")[0];
// var isShow = true; // Method 2
// 2. Binding event
obtn.onclick = function (){
//If (isshow) {// method 2
If (obtn. InnerHTML = = 'hidden'){
// 3. Event driver
newImg.style.display = 'none';
obtn. InnerHTML = "display"//
// isShow = false; // Method 2
}else {
newImg.style.display = 'block';
obtn. InnerHTML = "hidden";
// isShow = true; // Method 2
}
}
</script>
</body>
</html>There are two implementation methods. The implementation is as follows:
This is the default display interface. After clicking hide, it will look like this:
The simple function of displaying and hiding pictures is realized!
The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.