JavaScript基础——104.实战内容：元素的显示和隐藏【display=“none“，display=“block“】

时间sk

于 2025-03-10 04:25:41 发布

阅读量280

点赞数 2

分类专栏： Javascript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_63215361/article/details/146142702

版权

Javascript 专栏收录该内容

116 篇文章

订阅专栏

要让元素隐藏起来我们要给他添加一个display属性
display=“none” 整个元素隐藏起来
display="block"整个元素显示出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#btn{
				width: 100px;height: 30px;display: block;margin: 0 auto;
			}
			#zxw{
				width: 200px;height: 200px;margin: 50px auto;background: red;
			}
		</style>
	</head>
	<body>
		<button id="btn">点击</button>
		<div id="zxw" >12</div>
		
		<script type="text/javascript">
			var btn=document.getElementById("btn");
			var zxw=document.getElementById("zxw");
			
			var abc=1;
			
			btn.onclick = function(){
				if (abc==1) {
					zxw.style.display="none";
					abc=0;
				} else{
					zxw.style.display="block";
					abc=1;
				}
				
			}
		</script>
	</body>
</html>