JavaScript to show and hide images

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:
  • Native JS realizes hiding and displaying pictures JS realizes clicking and switching pictures
  • How to use JavaScript to hide and display images at a fixed time
  • js calls the picture hiding & display implementation code

<<:  Detailed steps to install MySql 5.7.21 in Linux

>>:  How to install iso file in Linux system

Recommend

JavaScript to achieve floor effect

This article shares the specific code of JavaScri...

The difference between distinct and group by in MySQL

Simply put, distinct is used to remove duplicates...

JavaScript to achieve stair rolling special effects (jQuery implementation)

I believe everyone has used JD. There is a very c...

Detailed explanation of basic concepts of HTML

What is HTML? HTML is a language used to describe...

How to set background color and transparency in Vue

Background color and transparency settings As sho...

Analysis of the principle and usage of MySQL continuous aggregation

This article uses examples to illustrate the prin...

Detailed explanation of JavaScript Proxy object

Table of contents 1. What is Proxy? 2. How to use...

In-depth explanation of the global status of WeChat applet

Preface In WeChat applet, you can use globalData ...

MySQL Optimization: Cache Optimization (Continued)

There are caches everywhere inside MySQL. When I ...

Detailed installation tutorial for MySQL zip archive version (5.7.19)

1. Download the zip archive version from the offi...

Detailed explanation of node.js installation and HbuilderX configuration

npm installation tutorial: 1. Download the Node.j...

How to use a game controller in CocosCreator

Table of contents 1. Scene layout 2. Add a handle...

Concat() of combined fields in MySQL

Table of contents 1. Introduction 2. Main text 2....

How to use docker to deploy dubbo project

1. First, use springboot to build a simple dubbo ...

Draw an iPhone based on CSS3

Result:Implementation Code html <div class=...