js实现点击隐藏图片

本文转载自查看原文 2019-05-15 20:05 1430 dom/ js/ javascript

方法一：

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

<style>
    img {
        width: 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{
        width: 400px;
        height: 300px;
        display: block;
    }
    .hide{
        width: 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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 JS实现图片的弹出和隐藏 js如何实现点击显示和隐藏表格 JS原生隐藏显示图片,点击切换图片的效果 JS实现点击查看密码功能，再次点击隐藏密码！ js实现点击图片，然后图片放大 js点击显示隐藏 JS实现点击参数面板按钮显示或隐藏数据 js实现输入密码之延迟星号和点击按钮显示或隐藏 js实现点击div以外区域，隐藏div区域 js实现的点击div区域外隐藏div区域