js基础2显示隐藏

最新推荐文章于 2024-11-02 19:19:35 发布

xwzj的小白

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量115

点赞数

分类专栏： javascript js 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43607916/article/details/108757542

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

显示隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示和隐藏图片</title>
	</head>
	<body>
		<button id="btn">隐藏</button>
		<br>
		<img src="images/2.jpg" id="new" >
		<script type="text/javascript">
			//1.获取事件源
			var obtn = document.getElementById('btn');
			var newimg=document.getElementsByTagName('img')[0];
			//var isshow=true;
			//2.绑定事件
			obtn.onclick =function(){
				//3.事件驱动程序
				if(obtn.innerHTML==='隐藏'){
					newimg.style.display ='none';
				    obtn.innerHTML='显示';
					//isshow=false;
				}else{
					newimg.style.display ='block';
					obtn.innerHTML='隐藏';
					//isshow=true;
				}
				
				
			}
		</script>
	</body>
</html>