zoukankan html css js c++ java

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>

查看全文

相关阅读:
log4js 2.X版本配置详解
 ping -c 3 localhost
children_process.exec 执行 ping命令报错
 淘宝双十一为什么会出现通道拥挤？
'ascii' codec can't decode byte 0xd6 in position 0
window 安装grunt
display:none与visible:hidden的区别 slideDown与
 ztree-demo 2
ztree-demo
技术总结PHP+微信

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