本文介绍如何使用JavaScript实现点击按钮切换图片的显示与隐藏状态。通过获取DOM元素并监听点击事件，修改图片的display样式属性或控制变量状态，即可实现简单的交互效果。
JavaScript实现图片显示与隐藏功能
本文主要讲解如何利用JavaScript实现图片的显示与隐藏功能，供读者参考。
具体实现逻辑为：点击按钮可切换图片的显示与隐藏状态，初始状态下图片默认显示。以下是相关代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏图片</title>
</head>
<body>
<button id="btn">隐藏</button>
<br>
<img src="img/image01.jfif" id="newGirlFriend">
<script type="text/javascript">
// 1.获取事件源
var obtn = document.getElementById("btn");
var newImg = document.getElementsByTagName("img")[0];
// var isShow = true; //方法2
// 2.绑定事件
obtn.onclick = function (){
// if (isShow) { //方法2
if (obtn.innerHTML === '隐藏') {
// 3.事件驱动程序
newImg.style.display = 'none';
obtn.innerHTML = "显示"; //
// isShow = false; //方法2
}else {
newImg.style.display = 'block';
obtn.innerHTML = "隐藏";
// isShow = true; //方法2
}
}
</script>
</body>
</html>实现该功能主要有两种方法，具体效果如下所述。
初始界面如默认显示状态所示，点击隐藏按钮后，界面将发生如下变化：
至此，简单的图片显示与隐藏功能已实现。
以上内容为本文的全部介绍，希望能为读者的学习提供一定帮助，同时也欢迎大家继续支持本站。