案例：点击按钮隐藏图片 再次点击显示图片

最新推荐文章于 2024-07-08 17:28:27 发布
最新推荐文章于 2024-07-08 17:28:27 发布
阅读量1.8w 收藏 30
点赞数 8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c9316/article/details/81504958
版权

要求如题，本宝宝的代码如下：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 点击按钮隐藏图片 显示图片……循环……*/ -->
	<style>
		.hide{
			display: none;
		}
	</style>
</head>
<body>
	<button value="隐藏图片" onclick="fn()" style="display:block;" id="world">隐藏图片 </button>
	<img src="oil.png" alt="" id="img"  />
	<script>
		function fn(){
			var img=document.getElementById("img");
			if(document.getElementById("world").innerHTML=="隐藏图片"){
				img.className="hide";
				document.getElementById("world").innerHTML="显示图片";
			}else{
				img.className="";
				document.getElementById("world").innerHTML="隐藏图片";
			}
		}
	</script>
</body>

结果符合要求：

 

点击按钮时，变成：

再次点击按钮：

 

但是有一点我没想明白，就是在if语句中，当我将else改为if(document.getElementById("world").innerHTML=="显示图片")时，点击按钮 图片无反应……我觉得这两种代码没有区别啊？为什么结果不一样呢……

留存 等我以后明白了再来解答~嗯哼~╭(╯^╰)╮

 

牟童
关注
点击按钮显示对应的图片
Discovery
08-10 7268
img{display:none;} 请选择 图片1 图片2 图片3 图片4 var arr=["1.png","2.png","3.png","4.png"]; var imgShow=document.getElementById('imgshow');
点击按钮显示和隐藏图片
weixin_57762564的博客
09-27 1534
1.新建一个HTML文件以及css样式文件还有js 2.把css文件以及js引入HTML 3.写入一个div并设置类名 4.在div内写入一个img然后导入图片并给这个img设置类名以及id 5.在div内写入button按钮并给它设置类名与id 6.给div在css里设置宽高以及居中 7.给图片设置宽高和隐藏 8.在js获取图片的id 9.再获取按钮的id 10.给按钮设置点击事件 11.在用if语句判断一下 12.点击预览完成制作 ...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 916
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
js点击按钮显示图片，再点击关闭图片最佳完美解决方案（点击按钮隐藏图片 再次点击显示图片，可循环）
weixin_41160560的博客
04-24 5158
result += "<img id='comfirmPic1Local' style='display:none' >" result += "<button id='lookPic' onclick='findPic1Local("+comfirmPic1Local+","+lookPic+")'>查看回单</button>" function...
JS原生隐藏显示图片,点击切换图片的效果
liudanyang_21的博客
06-19 427
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: 1 <!DOCTYPE html> 2 <html> 3 <head
Unity2D 实现摁下一个键来使图像出现消失
hanjilun的博客
05-10 1325
using System.Collections; using System.Collections.Generic; using UnityEngine; public class AttackTip : MonoBehaviour { public GameObject JinGangAttackTip; public int TapI; // Start is called before the first frame update void Start() { } // Update is ca
单击按钮显示隐藏子菜单经典案例
09-05
这个“单击按钮显示隐藏子菜单经典案例”提供了一个简单的JavaScript解决方案，允许用户通过点击按钮控制子菜单的可见性。下面我们将详细探讨这个案例中的关键知识点。 首先，我们需要理解这个案例的目标：当用户...
VB程序 隐藏、显示开始按钮
12-03
为了实现一个完整的VB程序，你可能需要封装这些功能到一个按钮的点击事件或者其他触发器中，让用户可以选择隐藏或显示开始按钮。同时，需要注意的是，修改系统界面元素可能会对用户体验产生影响，因此在实际应用中应...
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
10-23
再次，要实现点击单选按钮改变输入框内容的功能，通常需要利用JavaScript对DOM（文档对象模型）的操作。在文档中，通过为每个单选按钮添加onclick事件处理函数，并在事件触发时执行相应的函数，来实现不同的交互逻辑...
jQuery实现的图文排版点击弹出图片特效源码
11-24
同时，如果需要关闭大图的选项，可以在模态窗口外添加一个关闭按钮，或者再次点击图片关闭大图，使用`.hide()`或`.fadeOut()`隐藏模态窗口。 此外，考虑到响应式设计，此特效可能还需要根据设备屏幕大小调整图片和...
jQuery toggle顶部登录框点击登录按钮滑动显示登录框
10-31
本示例中的“jQuery toggle顶部登录框点击登录按钮滑动显示登录框”是利用jQuery的`toggle()`方法来实现一个交互式用户体验，即当用户点击顶部的登录按钮时，登录框会通过滑动动画展示出来，再次点击则隐藏。...
【Unity2D】实现点击UI图片 图片消失并且生成粒子
m0_70000383的博客
10-06 303
首先要把Canvas的Render Mode设置为Screen Space - Camera。由于粒子系统不能在UI层显示，需要获取点击坐标，在点击位置生成预制体。预制体通过Resources.Load()方法获取。
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
weixin_30446393的博客
02-27 600
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码,我先说一下要求：1.有两个按钮,内容为显示,和换,2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来,4.当图片隐藏的时候,图片不可变换这就是要求,下面来看代码:换图片隐...
QT5/Pyqt5配置工具以及实现图片显示，点击按钮显示图片，点击按钮跳转页面，添加槽函数
我亦无他，唯手熟尔
05-23 8712
QT5/Pyqt5配置工具以及实现图片显示，点击按钮显示图片，点击按钮跳转页面，添加槽函数
点击按钮显示和隐藏图片精简方法
balian1021的博客
07-04 428
using UnityEngine;using System.Collections; public class HideOrShowImg : MonoBehaviour { public GameObject Img; void Start() { Img.SetActive(false); } public void HideOrS...
原生js实现点击按钮显示/隐藏图片
在热爱技术的路上一直前行。
02-26 6601
目录结构： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
点击按钮隐藏或显示图片
qq_46951524的博客
06-30 1655
显示与隐藏图片 直接上代码吧！！！！ <div id="app"> <img src="demo.png" v-show="showtime" /> <button @click="click">显示图片</button> </div> <script> new Vue({ el: '#app', data: { showtime: false }, methods:{ click(){ this
jquery 根据 淡入淡出显示隐藏 滑动 动画做一个小案例
最新发布
09-07
jQuery 的动画功能非常强大，可以轻松实现元素的淡入淡出显示隐藏以及滑动效果。下面是一个简单的示例，展示了如何使用 jQuery 实现元素的淡入淡出动画： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery淡入淡出与滑动动画</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #fade-in-out { display: none; width: 200px; height: 200px; background-color: red; position: absolute; } </style> </head> <body> <div id="container"> <button id="show-hide">点击显示/隐藏淡入淡出</button> <div id="fade-in-out">淡入淡出区域</div> </div> <script> $(document).ready(function() { $("#show-hide").click(function() { var $target = $("#fade-in-out"); // 淡入动画 $target.fadeIn(1000, function() { // 持续时间较长的隐藏动画，如需更快可用 fadeOut() $target.delay(2000).fadeOut(1000); }); }); }); </script> </body> </html> ``` 在这个例子中，当你点击"显示/隐藏淡入淡出"按钮时，`#fade-in-out` 区域会从隐藏状态淡入，然后在两秒后淡出并再次隐藏。`fadeIn()` 和 `fadeOut()` 方法分别用于创建淡入和淡出的效果。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值