热身运动之JS设置鼠标点击事件

最新推荐文章于 2024-01-11 10:13:54 发布

cookielv

最新推荐文章于 2024-01-11 10:13:54 发布

阅读量296

点赞数

分类专栏：自学第一课

本文链接：https://blog.csdn.net/qq_19004625/article/details/53312974

版权

自学第一课专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近因为搬家，代码搁浅了将近半个月。感觉前面学的东西又忘得差不多了，所以说学东西要快速入门才行。

前几期看的妙味课堂的视频遗留的一个问题，个人感觉对HTML的定位和浮动理解的不透彻。自己写的页面对一些元素的定位常常达不到想要的效果，设计的页面代码还比较复杂。用外链式引入JS的时候，有一些效果无法实现，但是直接写在HTML的页面时又能够运行。

比如我想实现下面这个效果：

但是我自己写的总是不一样，设置宽度的时候会受浮动影响：

附上自己粗鄙的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/move.css" rel="stylesheet" type="text/css"/>
		<!--<link src="css/set.js"  type="text/javascript"/>-->
	</head>
	<body>
		<div id="container">
			<h2>请为下面的DIV设置样式：
				<input id="setd" type="button" value="点击设置" />
			</h2>			
			<div id="father"></div>			
			<div id="son">	
				<div>
				 <strong>请选择背景色:
				 	<div id="rd">红</div>
				 	<div id="grn">绿</div>
				 	<div id="blu">蓝</div>
		       </strong></div>
		       <div>
				 <strong>请选择宽(px):
				 	<div id="wd1">200</div>
				 	<div id="wd2">300</div>
				 	<div id="wd3">400</div>
				 </strong>	</div>
				 <div>
				 <strong>请选择高(px):
				 	<div id="ht1">200</div>
				 	<div id="ht2">300</div>
				 	<div id="ht3">400</div>
				 </strong>	</div>
				
				 <div id="bt">
					 <input id="confirm" type="button" value="确认"/>
					 <input id="recover" type="button" value="恢复"/>
				 </div>				  
			</div>
		</div>
		<script>
			var str=document.getElementById("setd");
			var str1=document.getElementById("son");
			function sat(){
				str1.style.display="block";
			  }
			str.οnclick=sat;
			
			var str2=document.getElementById("rd");
			var snum=document.getElementById("father");
			str2.οnclick=function(){
				snum.style.backgroundColor="red";
				str2.οnmοuseοver=function(){
					str2.style.backgroundColor="red";
					str2.style.borderColor="black";
				}
				str2.οnmοuseοut=function(){
					str2.style.backgroundColor="greenyellow";
					str2.style.borderColor="greenyellow";
				}
			}
			
			var str3=document.getElementById("grn");			
			str3.οnclick=function(){
				snum.style.backgroundColor="green";
				str3.οnmοuseοver=function(){
					str3.style.backgroundColor="green";
					str3.style.borderColor="black";
				}
				str3.οnmοuseοut=function(){
					str3.style.backgroundColor="yellow";
					str3.style.borderColor="yellow";
				}
			}
			
			var str4=document.getElementById("blu");			
			str4.οnclick=function(){
				snum.style.backgroundColor="blue";
				str4.οnmοuseοver=function(){
					str4.style.backgroundColor="blue";
					str4.style.borderColor="black";
				}
				str4.οnmοuseοut=function(){
					str4.style.backgroundColor="blueviolet";
					str4.style.borderColor="blueviolet";
				}
			}
			
			var str5=document.getElementById("wd1");			
			str5.οnclick=function(){
				snum.style.width="200px";
				str5.οnmοuseοver=function(){
					str5.style.backgroundColor="orange";
					str5.style.borderColor="black";
				}
				str5.οnmοuseοut=function(){
					str5.style.backgroundColor="white";
					str5.style.borderColor="white";
				}
			}
			
			var str6=document.getElementById("wd2");			
			str6.οnclick=function(){
				snum.style.width="300px";
				str6.οnmοuseοver=function(){
					str6.style.backgroundColor="orange";
					str6.style.borderColor="black";
				}
				str6.οnmοuseοut=function(){
					str6.style.backgroundColor="white";
					str6.style.borderColor="white";
				}
			}
				
				var str7=document.getElementById("wd3");			
			str7.οnclick=function(){
				snum.style.width="400px";
				str7.οnmοuseοver=function(){
					str7.style.backgroundColor="orange";
					str7.style.borderColor="black";
				}
				str7.οnmοuseοut=function(){
					str7.style.backgroundColor="white";
					str7.style.borderColor="white";
				}
			}
			
			
			var str8=document.getElementById("ht1");			
			str8.οnclick=function(){
				snum.style.height="200px";
				str8.οnmοuseοver=function(){
					str8.style.backgroundColor="orange";
					str8.style.borderColor="black";
				}
				str8.οnmοuseοut=function(){
					str8.style.backgroundColor="white";
					str8.style.borderColor="white";
				}
			}
			
			var str9=document.getElementById("ht2");			
			str9.οnclick=function(){
				snum.style.height="300px";
				str9.οnmοuseοver=function(){
					str9.style.backgroundColor="orange";
					str9.style.borderColor="black";
				}
				str9.οnmοuseοut=function(){
					str9.style.backgroundColor="white";
					str9.style.borderColor="white";
				}
			}
			
			
			var str10=document.getElementById("ht3");			
			str10.οnclick=function(){
				snum.style.height="400px";
				str10.οnmοuseοver=function(){
					str10.style.backgroundColor="orange";
					str10.style.borderColor="black";
				}
				str10.οnmοuseοut=function(){
					str10.style.backgroundColor="white";
					str10.style.borderColor="white";
				}
			}
			
			var s1=document.getElementById("confirm");
			s1.οnclick=function(){
				str1.style.display="none";
			}
			
			var s2=document.getElementById("recover");
			s2.οnclick=function(){
				snum.style.width="90px";
				snum.style.height="90px";
	            snum.style.background="white";
	            snum.style.border="3px solid black";
			}
		</script>
	</body>
</html>

引入的css文件：

#container{
	width:800px;
	height:500px;
	background:lightgray;
	padding:10px;
}

#setd{
	width:90px;
	height:40px;
	color:white;
	font-size:18px;
	background: red;
	border:1px solid red;
}

#father{
	width:90px;
	height:90px;
	background: white;
	border:3px solid black;
}

#son{
	width: 300px;
	height:200px;
	background: white;
	border: 20px solid lightblue;
	padding:10px;
	margin: 20px;
	float:right;
	display:none;
	clear: left;
}



#rd,#grn,#blu{
	width: 40px;
	height:30px;
	color:white;
	margin: 4px;
	padding: 8px;
	font-size: 16px;
	/*border: 1px solid gainsboro;*/
	display: inline;
}

#rd{
	background:greenyellow;
}

#grn{
	background: yellow;
}

#blu{
	background: blueviolet;
}
#son strong{
	height:50px;
	line-height:50px;
    display: inline;
	text-align: center;	
}

#wd1,#wd2,#wd3,#ht1,#ht2,#ht3{
	width: 40px;
	height:30px;
	margin: 3px;
	padding: 5px;
	font-size: 20px;
	line-height: 30px;
	background: white;
	border: 1px solid gainsboro;
	display: inline;
	}
	
#bt input{ 
	width:60px; 
	height:30px; 
	color:white;
	border:1px solid blue;
	background:blue;				 
	margin:10px;				 
	float:right;			  
				}

要如何解决浮动的问题呢？尝试过设置高度，clear:both，貌似都没有用。