方法一:

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

  1. <style>
  2. img {
  3. width: 400px;height: 300px;
  4. display: none;
  5. }
  6. </style>
  7. <body>
  8. <input id = "btn" type="button" value="clickme">
  9. <img src="data:images/1.jpg" id="pic">
  10.  
  11. <script>
  12. var btn = document.getElementById("btn");
  13. var pic = document.getElementById("pic");
  14. btn.onclick= function (){
  15. pic.style.display = "block";
  16. }
  17. </script>

方法二:

在html中不加图片,js触发点击事件时添加图片

  1. <style>
  2. input{
  3. display: block;
  4. }
  5. </style>
  6. <body>
  7. <input id = "btn" type="button" value="clickme">
  8. <img src="" id="pic">
  9.  
  10. <script>
  11. var btn = document.getElementById("btn");
  12. var pic = document.getElementById("pic");
  13. btn.onclick= function (){
  14. pic.src="data:images/1.jpg";
  15. pic.style.width="400px";
  16. pic.style.height="300px";
  17. }
  18. </script>

方法三:

更换class名,先给img用使图片隐藏的样式,触发点击事件,更换为显示图片的属性。

  1. <style>
  2. input{
  3. display: block;
  4. }
  5. .pic{
  6. width: 400px;
  7. height: 300px;
  8. display: block;
  9. }
  10. .hide{
  11. width: 400px;height: 300px;
  12. display: none;
  13. }
  14. </style>
  15. <body>
  16. <input id = "btn" type="button" value="clickme">
  17. <img src="data:images/1.jpg" id="pic" class="hide" class="pic" >
  18.  
  19. <script>
  20. var btn = document.getElementById("btn");
  21. var pic = document.getElementById("pic");
  22. btn.onclick=function(){
  23. pic.className="pic";
  24. }
  25. </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. HTML input type=file文件选择表单的汇总(二)

    1. 原生file input大小.按钮文字等UI自定义 元素input的原生样式,不是太好看: 有一种方法是这样的:让file类型的元素透明度0,覆盖在我们好看的按钮上.然后我们去点击好看的按钮,实 ...

  2. font-family:黑体;导致css定义全部不起作用

    css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了. 只要把font-family: "黑体"; 改成 font-fami ...

  3. jsp之jstl(展示所有商品、重写登录案例)

    jsp之jstl jstl: jsp标准的标签库语言,apache的,是用来替代java脚本 使用步骤: 1.导入jar包 (jstl.jar和standard.jar) 2.在页面上导入标签库 &l ...

  4. 移动端的touch事件(一)

    如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通常会有 ...

  5. 解决Apache日志"internal dummy connection"方法

    最近查看服务器中apache日志,发现有大量的 OPTIONS * HTTP/1.0" 200 - "-" "Apache (internal dummy co ...

  6. 使用 Windows 10 WSL 搭建 ESP8266 编译环境并使用 VSCODE 编程(一)(2019-08-23)

    目录 使用 Windows 10 WSL 搭建 ESP8266 编译环境并使用 VSCODE 编程 安装前准备 安装 ESP8266 工具链 下载 ESP8266 SDK 编译 花絮 使用 Windo ...

  7. 2019-1-29-jekyll-如何加密博客-防止抓取

    title author date CreateTime categories jekyll 如何加密博客 防止抓取 lindexi 2019-01-29 16:26:17 +0800 2018-2- ...

  8. python 正确地初始化对象

  9. PHP汉字验证码

    转自:http://www.blhere.com/1167.html 12345678910111213141516171819202122232425262728293031323334353637 ...

  10. javaweb学习总结(一) - - JSP取得绝对路径

    在JavaWeb开发中,常使用绝对路径的方式来引入JavaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做法如下: 例如: 1 <!--使用绝对路径的方式引入 ...