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>

相关阅读:
redis常见面试题
nginx常见的面试题
python学习笔记（15）pymysql数据库操作
python中的if not
python学习笔记（24）-类与对象
python学习笔记（23）-异常处理
python学习笔记（22）-os文件操作模块
Maven---pom.xml配置详解
maven+jmeter+jenkins集成
适配器模式

原文地址：https://www.cnblogs.com/sandraryan/p/10871818.html