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. ...
随机推荐
- hdu 1711Number Sequence (KMP入门,子串第一次出现的位置)
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- JSP Web第六章整理复习 JavaBean技术
P183 什么是JavaBean,JavaBean有哪些特点? javabean是一种特殊的java类 特点:属性private,方法public P184 JavaBean封装数据,例6-1,6-2 ...
- 怎么用PHP+sqlite3验证登录用户名和密码
Session:在计算机中,尤其是在网络应用中,称为“会话控制”.Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 Web 页之间跳转时,存储在 Session 对象 ...
- Java中时间和日期的处理
一.日期转换为字符串 1.日期以特定的格式输出: // 创建日期并转换为yyyy-MM-dd格式_(MM一定要大写,以免与hh:mm:ss中的mm冲突) SimpleDateFormat sdf = ...
- js简单倒计时
不想每次用倒计时,都现写代码,比较烦,这里记一下,也顺便分享一些倒计时简单的逻辑. 如果你有更简单方便的代码,可以分享给大家. var method = { countdownObj: { timer ...
- JS放在body与head中的不同
放在body和head其实差不多的,只不过是文档解析的时间不同.浏览器解析html是从上到下的.如果把javascript放在head里的话,则先被解析,但这时候body还没有解析,所以$(#btn) ...
- shell学习（21）- tr
Linux tr 命令用于转换或删除文件中的字符. tr 指令从标准输入设备读取数据,经过字符串转译后,将结果输出到标准输出设备. 在tr中利用集合的概念,可以轻松地将字符从一个集合映射到另一个集合中 ...
- POJ 2632 Crashing Robots (模拟 坐标调整)（fflush导致RE）
题目链接:http://poj.org/problem?id=2632 先话说昨天顺利1Y之后,直到今天下午才再出题 TAT,真是刷题计划深似海,从此AC是路人- - 本来2632是道略微恶心点的模拟 ...
- Ecplise中Junit4单元测试的基本用法
看了一些Junit4的视频,简单了解了Junit4的一些基本用法,整理记录一下. 环境搭建 这里使用的开发工具是MyEclipse,首先新建一个Java工程,将Junit4的jar包引入,eclips ...
- java jvm 参数 -Xms -Xmx -Xmn -Xss 调优总结
常见配置举例 堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制.32位系统 下,一般限制在1.5 ...