JavaScript to show and hide images
|
JavaScript shows and hides pictures, for your reference, the specific content is as follows Click the button to show and hide the image (displayed by default). Attach the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show and hide images</title>
</head>
<body>
<button id="btn">Hide</button>
<br>
<img src="img/image01.jfif" id="newGirlFriend">
<script type="text/javascript">
// 1. Get the 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 === 'Hide') {
// 3. Event driver newImg.style.display = 'none';
obtn.innerHTML = "display"; //
// isShow = false; // Method 2
}else {
newImg.style.display = 'block';
obtn.innerHTML = "Hide";
// 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 showing and hiding pictures is now realized! The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed steps to install MySql 5.7.21 in Linux
>>: How to install iso file in Linux system
Recommend
vmware workstation12 installation centos prompts VMware Player and Device/Credential Guard are incompatible, reasons and solutions
In the latest version of WIN10, Microsoft introdu...
MySQL database implements MMM high availability cluster architecture
concept MMM (Master-Master replication manager fo...
Enter the style file for the automatic search suggestion function: suggestion.css
Copy code The code is as follows: .sugLayerDiv{ p...
Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)
Docker installation (Alibaba Cloud Server) Docker...
Vue3+Vite+TS implements secondary encapsulation of element-plus business components sfasga
Table of contents 1. Structure string 2. Return t...
How to control the proportion of Flex child elements on the main axis
background Flex layout achieves alignment and spa...
HTML form value transfer example through get method
The google.html interface is as shown in the figur...
Detailed explanation of ActiveMQ deployment method in Linux environment
This article describes the deployment method of A...
Web Design Tutorial (1): Steps and Overall Layout
<br /> Note: All texts, except those indicat...
Several ways to encapsulate breadcrumb function components in Vue3
Table of contents Preface 1. Why do we need bread...
Detailed explanation of Linux file operation knowledge points
Related system calls for file operations create i...
Solution to the problem of var in for loop
Preface var is a way to declare variables in ES5....
How to manage cached pages in Vue
Table of contents Problem 1: Destruction 1. How t...
Detailed analysis of each stage of nginx's http request processing
When writing the HTTP module of nginx, it is nece...
About the processing of adaptive layout (using float and margin negative margin)
Adaptive layout is becoming more and more common i...