js实现点击隐藏图片

古城微笑少年丶 2023-06-05 08:08 5阅读 0赞

方法一：

把图片的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>

转载于:https://www.cnblogs.com/sandraryan/p/10871818.html

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue js 实现点击页面空白处隐藏指定div

Vue js 实现点击页面空白处隐藏指定div <template>  <div clas

迷南。/ 2023年10月11日 15:11/ 0 赞/ 82 阅读

相关 js点击其他地方隐藏

js点击其他地方隐藏： <div class="container"> <button id="clickMe">click me</button>

刺骨的言语ヽ痛彻心扉/ 2023年07月10日 15:34/ 0 赞/ 12 阅读

相关练习：js实现点击切换图片

点击切换图片，控制是否可以循环切换 <!DOCTYPE html> <html lang="en"> <head> <met

Dear 丶/ 2023年07月07日 11:05/ 0 赞/ 166 阅读

相关 js实现点击隐藏图片

方法一：把图片的display设为none，触发点击事件时，display变为block <style> img { wi

古城微笑少年丶/ 2023年06月05日 08:08/ 0 赞/ 6 阅读

相关 js控制div点击隐藏显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta n

比眉伴天荒/ 2022年09月26日 15:49/ 0 赞/ 296 阅读

相关 js实现点击按钮使图片排序

效果 1 、点击按钮如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大如果按钮文

梦里梦外;/ 2022年09月11日 15:27/ 0 赞/ 298 阅读

相关点击显示再次点击隐藏

<script> $(function()\{ $('\a').click(function()\{//点击a标签 if($('

亦凉/ 2022年06月07日 09:06/ 0 赞/ 374 阅读

相关实现点击图片下载

实现点击图片下载 1.编写java代码 / 点击图片下载 @param imagePath @return

系统管理员/ 2022年06月05日 00:10/ 0 赞/ 319 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 292 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 408 阅读