js实现点击隐藏图片

方法一：

把图片的display设为none，触发点击事件时，display变为block

<style>
    img {
         400px;height: 300px;
        display: none;
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="images/1.jpg" id="pic"> 
    
    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick= function (){
        pic.style.display = "block";
    }
    </script>

方法二：

在html中不加图片，js触发点击事件时添加图片

<style>
    input{
        display: block;
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="" id="pic"> 

    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick= function (){
        pic.src="images/1.jpg";
        pic.style.width="400px";
        pic.style.height="300px";
    }
    </script>

方法三：

更换class名，先给img用使图片隐藏的样式，触发点击事件，更换为显示图片的属性。

<style>
    input{
        display: block;
    }
    .pic{
         400px;
        height: 300px;
        display: block;
    }
    .hide{
         400px;height: 300px;
        display: none;
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="images/1.jpg" id="pic" class="hide" class="pic" > 

    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick=function(){
        pic.className="pic";
    }
    </script>