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. ...
随机推荐
- GCC/GDB学习
GCC学习 1.gcc是根据后缀名来区分文件的 .c : c语言源文件 .a : 目标文件构成的库文件 .C/.cc/.cxx : c++源文件 .h : 头文件 .i : 预处理过的C源文件 .ii ...
- 初次接触python的re模块
刷CF的时候,看到一个简单的题目,可以用来练练正则表达式 于是乎找到了re.sub的用法,说明如下 re.sub: (pattern, repl, string, count=0, │ f ...
- 【JZOJ5060】【GDOI2017第二轮模拟day1】公路建设 线段树+最小生成树
题面 在Byteland一共有n 个城市,编号依次为1 到n,它们之间计划修建m条双向道路,其中修建第i 条道路的费用为ci. Byteasar作为Byteland 公路建设项目的总工程师,他决定选定 ...
- windows上安装Anaconda和python的教程详解
一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...
- Same Tree 深度优先
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
- 最短路-Dijkstra算法整理
维基说的很全面:https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm 理解: 先设置访问数组vis[]和距离数组dist[],开始时把源点(sour ...
- 如何处理iOS中照片的方向
使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题,将设备中的照片导出到Windows上时,经常发现导出的照片方向会有问题,要么横着,要么颠倒着,需要旋转才适合观看.而如果直接在这些 ...
- CS第三方控件 标签： 总结 2016-04-09 11:51 1398人阅读 评论(27) 收藏
大家都知道,我现在在做CS的项目,现在是需求频变啊,心里好苦,做了这么久,还是涨了一点点见识的,下面就介绍一下自己最近用到的几款CS的第三方控件. DockPanel 想必大家都用过VS,那么想一下V ...
- 洛谷2375 BZOJ 3670动物园题解
题目链接 洛谷链接 我们发现题目要我们求的num[i]东西本质上其实是 求有多少以i结尾的非前缀且能与前缀匹配的字符串,而且要求字符串长度小于(i/2) 我们先不考虑字符串长度的限制,看所有以i结尾的 ...
- GIAC2019 演讲精选 | 面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码
一直以来, 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...