JS之开关混元大法

最新推荐文章于 2025-01-08 22:00:19 发布

原创最新推荐文章于 2025-01-08 22:00:19 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的网页效果实现方法：通过点击按钮来切换页面上一个红色方块的显示与隐藏状态。利用HTML、CSS和JavaScript实现了这一交互功能，并提供了两种不同的JS逻辑实现方案。

效果图：点击第一次消失，再点击一次显现

CSS部分：

			#ele{
				width: 100px;
				height: 100px;
				background-color: red;
			}

HTML部分：

	<body>
		<button id="btn">点我</button>
		<div id="ele"  style=”display:block”></div>
	</body>

JS部分：

		<script>
			//方法一设置开关
			window.onload=function(){
				var Btn=document.getElementById("btn");
				var Ele=document.getElementById("ele");
				var key=true;//设置开关
				Btn.onclick=function(){
					if(key==true){
						Ele.style.display="none";
						key=false;
					}
					else{
						Ele.style.display="block";
						key=true;
					}
				}
			//方法二检查元素状态
//				Btn.onclick=function(){
//					if(Ele.style.display=="block"){
//						Ele.style.display="none";
//					}
//					else{
//						Ele.style.display="block";
//					}
//				}


//				Btn.addEventListener('click',function(){
//					if(Ele.style.display=="block"){
//						Ele.style.display="none";
//					}
//					else{
//						Ele.style.display="block";
//					}
//				});
			}
		</script>