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

要求如题,本宝宝的代码如下:

<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=="显示图片")时,点击按钮 图片无反应……我觉得这两种代码没有区别啊?为什么结果不一样呢……

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

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值