JavaScript implementation shows and hides pictures

Time:2022-4-28

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.

Recommended Today

Principle of optical motion capture system

Nokov measurement optical motion capture system is a motion capture system based on the principle of infrared optics. Compared with the positioning means such as inertial principle motion capture system and GPS positioning system, it has the characteristics of high precision, low delay, strong real-time performance and is mostly used in indoor scenes. The system […]