方法一：

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

<style>

    img {

        width: 400px;height: 300px;

        display: none;

    }

</style>

<body>

    <input id = "btn" type="button" value="clickme">

    <img src="data: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="data: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="data: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>

js实现点击隐藏图片的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  3. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  4. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  5. js手机点击图片放大

    点击每个图片获取到对应的img的url链接,再把链接给一个空img以此来实现 最终效果:

  6. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  7. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  8. 昨天所写的JQ 点击隐藏事件，关键性原理

    JQ 点击隐藏事件,关键性原理 1.JQ 库的调用 一般选择为: 1)库越小越好 2)库的功能越强大越好 <script src="js/jquery.js" type=&q ...

  9. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. CSS-DOM的小知识(一)

    在DOM编程艺术中,CSS-DOM应用很广泛. 1.style属性 通过element.style.property可以获得元素的样式,但是style属性只能够返回内嵌样式,对于外部样式表的样式和he ...

  2. Session学习小结

    前言: 1.我们在学习一项技术的时候,首先应该是什么时候会用到这项技术.这次学习session也是如此,一般的web项目中都有用户的存在,有用户那么就有了用户的管理,而用户往往是存在于session中 ...

  3. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  4. 深入浅出Cocoa之消息【转】

    在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC 中的方法调用(ObjC中的术语为消息)跟其他语言中的方法调用差不多,只是形式有些不同而已. 譬如 ...

  5. Tool-图片压缩-腾讯智图：腾讯智图

    ylbtech-Tool-图片压缩-腾讯智图:腾讯智图 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传 ...

  6. Nginx教程(二) Nginx虚拟主机配置 （转）

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...

  7. VBA 生成带时间戳的随机数字

    Function GenPasswd(length, level) Dim allstr, substr, passwd As String allstr = "0123456789abcd ...

  8. Directx11教程(4) 一个最基本D3D应用程序(2)

    原文:Directx11教程(4) 一个最基本D3D应用程序(2) 接着上篇教程的代码,本篇加入基本的D3D代码,实现一个完整的D3D11程序框架. 我们增加一个新类D3DClass, 用来处理3D渲 ...

  9. javascript正则表达式和字符串RegExp

    这篇文章主要介绍了javascript正则表达式和字符串RegExp and String(一)的相关资料,需要的朋友可以参考下     前言     正则表达式是javascript非常重要和常用的 ...

  10. 配置一个Oracle共享服务器进程环境需要哪两项参数

    SHARED_SERVERS和DISPATCHERS. PROTOCOL(pro或prot): 调度程序要监听的网络协议.这是唯一必需的属性 ADDRESS(ADD或者ADDR): 指定调度程序正在上 ...