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

最新推荐文章于 2023-10-08 14:33:33 发布

原创最新推荐文章于 2023-10-08 14:33:33 发布 · 1.8w 阅读

30 ·

CC 4.0 BY-SA版权

本文探讨了使用JavaScript实现按钮点击切换图片显示与隐藏的功能。通过修改图片元素的类名来控制其显示状态，同时更新按钮文本以反映当前状态。文章记录了一个小技巧，即在if-else语句中如何正确判断并切换状态。

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

<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>

结果符合要求：