javascript之显示和隐藏图片，供大家参考，具体内容如下 点击按钮可以显示和隐藏图片（默认显示），附上代码： <!DOCTYPE html> <html
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>有两种实现方法，实现情况如下：
这是默认显示界面，点击隐藏后，会这样：
简单的显示和隐藏图片功能就实现啦！
--结束END--
本文标题: JavaScript实现显示和隐藏图片
本文链接: https://www.lsjlt.com/news/124930.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0