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>
有两种实现方法，实现情况如下：
这是默认显示界面，点击隐藏后，会这样：
简单的显示和隐藏图片功能就实现啦！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
温馨提示 : 本站内容来自会员投稿以及互联网，所有源码及教程均为作者总结编辑，请大家在使用过程中提前做好备份，以免发生无法预知的错误，源码类教程请勿直接用于生产环境！
