js实现点击隐藏图片
方法一：
把图片的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实现点击隐藏图片的更多相关文章
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用
业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...
- js手机点击图片放大
点击每个图片获取到对应的img的url链接,再把链接给一个空img以此来实现 最终效果:
- JS实现等比例缩放图片
JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- 昨天所写的JQ 点击隐藏事件，关键性原理
JQ 点击隐藏事件,关键性原理 1.JQ 库的调用 一般选择为: 1)库越小越好 2)库的功能越强大越好 <script src="js/jquery.js" type=&q ...
- jQuery实现菜单点击隐藏（上下左右）
canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- 转搞定python多线程和多进程
转自https://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的最小 ...
- sas教程
http://web5.pku.edu.cn/pucssr/SASbiancheng.pdf 本教程中的主题将向您介绍 SAS Enterprise Guide.您最好依次浏览这些主题. 概述 启动项 ...
- blogbeta1
//html <!DOCTYPE html> blog 身高:170 体重:230 座右铭 再给我吃一口 关于我 微信 微博 标签 SM SP 重金求爹 2019/11/16 本人找爹,带 ...
- VS2008中为控件添加属性（比如前景色，背景色）
VS2008中没有classwizard,但不要伤心,到了VS2010,classwizard又回来了. 可以参照这篇博客:http://blog.csdn.net/candyliuxj/articl ...
- [ITOO]动态建库 标签： 库数据库mysql 2016-07-17 21:23 241人阅读 评论(2) 收
最近一直在做权限系统的动态建库,动态建库,说白了就是在你点击"注册"按钮的时候,根据你输入的信息,来创建一个企业所需要的数据库的过程,因为现阶段并没有提供购买等功能,所以暂时咱们是 ...
- 亚洲唯一，阿里云SLB位列Gartner全球网络负载均衡市场前五
近日,Gartner发布了最新的全球企业级网络设备市场份额报告“Market Share: Enterprise Network Equipment by Market Segment, Worldw ...
- linux 系统下如何进行用户之间的切换
切换用户的命令是su,su是(switch user)切换用户的缩写.通过su命令,可以从普通用户切换到root用户,也可以从root用户切换到普通用户.从普通用户切换到root用户需要密码(该密码是 ...
- 【NS2】使用SourceInsight阅读NS源代码全攻略（转载）
NS的源码底层是C++,采用了C++/Tcl分裂对象模型,架构完善,堪称OOP编程的典范.但是NS源码体系庞大,源文件有2千多个,阅读起来不是特别方便,我推荐使用SourceInsight3.5.具体 ...
- Charles配置信息
1.下载Charles https://www.charlesproxy.com/download/ 2.破解 https://www.zzzmode.com/mytools/charles/ 或者 ...
- hdu 1384 Intervals （差分约束）
Problem - 1384 好歹用了一天,也算是看懂了差分约束的原理,做出第一条查分约束了. 题意是告诉你一些区间中最少有多少元素,最少需要多少个元素才能满足所有要求. 构图的方法是,(a)-> ...