网页元素动态操作与交互案例-优快云博客

案例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>控制div元素</title>
		<style>
			#div1{
				text-align: center;
			}
			#div2{
				height: 100px;
				width: 100px;
				background: black;
				margin: 10px auto;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<button id="kuan">变宽</button>
			<button id="gao">变高</button>
			<button id="se">变色</button>
			<button id="ying">隐藏</button>
			<button id="chong">重置</button>
			<div id="div2">
				
			</div>
		</div>
	</body>
</html>
<script>
	function id(id){
		return document.getElementById(id) ;
	}
	id("kuan").onclick = function(){
		id("div2").style.width = "200px" ;
	}
	id("gao").onclick = function(){
		id("div2").style.height = "200px" ;
	}
	id("se").onclick = function(){
		id("div2").style.background = "red" ;
	}
	id("ying").onclick = function(){
		id("div2").style.display = "none" ;
	}
	id("chong").onclick = function(){
		id("div2").style.cssText = "" ;
	}
</script>

案例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页变色</title>
	</head>
	<body id="body">
		<div id="lie">
			<ul id="nav">
				<li class="li">新闻</li>
				<li class="li">娱乐</li>
				<li class="li">体育</li>
				<li class="li">电影</li>
				<li class="li">音乐</li>
				<li class="li">旅游</li>
			</ul>
		</div>
		<div>
			<button id="red">红色</button>
			<button id="green">绿色</button>
			<button id="black">黑色</button>
		</div>
	</body>
</html>
<script>
	function id(id) {
		return document.getElementById(id) ;
	}
	id("red").onclick = function(){
		id("body").style.cssText = "" ;
		for(var i = 0; i < document.getElementsByClassName('li').length; i++){
			document.getElementsByClassName('li')[i].style.cssText = '' ;
		}
	}
	id("green").onclick = function(){
		id("body").style.background = "#A3C5A8" ;
		for(var i = 0; i < document.getElementsByClassName('li').length; i++){
			document.getElementsByClassName('li')[i].style.background = 'green' ;
		}
	}
	id("black").onclick = function(){
		id("body").style.background = "#ccc" ;
		for(var i = 0; i < document.getElementsByClassName('li').length; i++){
			document.getElementsByClassName('li')[i].style.background = 'black' ;
		}
	}
</script>
<style>
	*{
	margin: 0px;
	padding: 0px;
	}
	body{
		background: #FDD;
	}
	li{
		list-style: none;
		float: left;
	}
	#nav li{
		height: 25px;
		width: 85px;
		border: 1px solid #ffff;
		background: red;
		color: #ffff;
		font-weight: bolder;
		font-size: 12px;
		text-align: center;
		line-height:25px ;
		cursor: pointer;
	}
	#nav{
		margin: 30px 680px;
	}
	button{
		border: none;
		color: #fff;
		cursor: pointer;
	}
	#red{
		background: red;
	}
	#green{
		background: green;
	}
	#black{
		background: black;
	}
</style>

案例三：函数接收参数并弹出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>函数接收参数并弹出</title>
		<style>
			div{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<p><input type="text" id="input1" value="北京市"/></p>
			<p><input type="text" id="input2" value="朝阳区"/></p>
			<button id="Biography">传参</button>
		</div>
	</body>
</html>
<script>
	function id(id){
		return document.getElementById(id) ;
	}
	id("Biography").onclick = function(){
		alert(id("input1").value) ;
		alert(id("input2").value) ;
	}
</script>

案例四：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用循环将三个DIV变成红色</title>
	</head>
	<body>
		<input type="button" id="click" value="点击将DIV变成红色" />
		<div id="one">
			<div class="two"></div>
			<div class="two"></div>
			<div class="two"></div>
		</div>
	</body>
</html>
<script>
	function id(id){
		return document.getElementById(id) ;
	}
	id("click").onclick = function(){
		for(var i = 0; i < document.getElementsByClassName('two').length; i++){
			document.getElementsByClassName('two')[i].style.background = 'red' ;
		}
	}
</script>
<style>
	button{
		width: 100px;
	}
	#one>div{
		width: 100px;
		height: 100px;
		background: black;
		margin: 5px;
		float: left;
	}
	input{
		margin: 10px 800px;
	}
	#one{
		margin: 0px 700px;
	}
</style>

案例五：鼠标移入改变样式，鼠标移出恢复。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标移入改变样式，鼠标移出恢复。</title>
	</head>
	<body>
		<div id="kuan" onmouseover ="over()" onmouseout = "out()">
			<span id="zi">鼠标移入改变样式，鼠标移出恢复。</span>
		</div>
	</body>
</html>
<script>
	function id(id){
		return document.getElementById(id) ;
	}
	function over(){
		id("kuan").style.background = "#f0f0f0" ;
		id("kuan").style.border = "10px solid red" ;
		id("zi").style.color = "red" ;
	}
	function out(){
		id("kuan").style.cssText = "" ;
		id("zi").style.cssText = "" ;
	}
</script>
<style>
	div{
		margin: 50px auto;
		width: 150px;
		height: 150px;
		background: black;
		border: 10px solid black;
		cursor: crosshair;
	}
	span{
		font-size: 5px;
		color: #ffff;
	}
</style>

案例六：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标移入改变样式，鼠标移出恢复。</title>
	</head>
	<body>
		<div id="wai">
			<input type="checkbox" id="kuan" />
			<span id="fu" onmouseover ="over()" onmouseout = "out()">两周内自动登陆</span>
			<div id="tishi">
				为了您的信息安全，请不要在网吧或公用电脑上使用此功能！
			</div>
		</div>
	</body>
</html>
<script>
	function id(id){
		return document.getElementById(id) ;
	}
	function over(){
			id("tishi").style.display = "block" ;
		}
	function out(){
			id("tishi").style.cssText = "" ;
		}
</script>
<style>
	span{
		font-size: 15px;
		cursor: pointer;
	}
	#tishi{
		height: 36px;
		width: 188px;
		background: #ffefa4;
		border: 1px solid red;
		display: none;
		font-size: 5px;
		margin: 0px auto;
		}
	#wai{
		text-align: center;
	}
</style>

案例七：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度输入法</title>
	</head>
	<body>
		<div>
			<input type="button" id="butn" value="输入法" />
			<ul id="ui">
				<li>
					<a href="javascript:;">手写</a>
				</li>
				<li>
					<a href="javascript:;">拼音</a>
				</li>
				<li id="close">
					<a href="javascript:;">关闭</a>
				</li>
			</ul>
		</div>
	</body>
	<script>
		function id(id){
			return document.getElementById(id) ;
		}
		id("butn").onclick = function(){
			id("ui").style.display = "block" ;
		}
		id("close").onclick = function(){
			id("ui").style.display = "none" ;
		}
	</script>
</html>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	#butn{
		display: block;
		margin: 5px auto;
	}
	#ui{
		border: 1px solid #9a99ff;
		width: 68px;
		height: 80px;
		margin: 5px auto;
		display: none;
	}
	li{
		list-style: none;
		margin: 5px;
		padding: 0 5px;
	}
	a{
		text-decoration: none;
		font-size: 5px;
	}
	#close{
		border-top: 1px solid #9a99ff;
	}
	li:hover{
		background: #9a99ff;
	}
</style>

案例八：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度输入法</title>
	</head>
	<body>
		<div id="outer">
			<div>
				<strong>新华网</strong>
				北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，
				在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。
				近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。
			</div>
			<div>
				4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高
				度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，
				决不能"下不为例"；抓好食品安全要突出一个"
				<strong>严</strong>"字，做到<strong>严防</strong>、<strong>严查</strong>、
                <strong>严处</strong>。
			</div>
			<div>
				<strong>宁夏重点开展了四轮问题乳粉彻查清缴工作</strong>
				，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，
				共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。
			</div>
			<div>
				做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京，
				<strong style="color:red;">全市设立了3000个风险监测点</strong>
				，建立了包括3000余种食品添加剂和非法添加物的数据库，对110家国内外食品相关组织、
				媒体发布的线索进行监测，及时进行风险评估，加强抽检控制。
			</div>
		</div>
	</body>
	<script>
		var oDiv = document.getElementById("outer").getElementsByTagName("div");
		for(var i = 0; i < oDiv.length; i++){
			oDiv[i].onclick = function (){
				alert(this.innerHTML)	
			}	
		}
	</script>
</html>
<style>
	#outer div{
		border: 2px solid #ccc;
		padding: 10px;
		margin-bottom: 10px;
		text-indent: 2em;
		cursor: pointer;
		width: 476px;
		height: 54px;
		font-size: 12px;
		margin: 10px auto;
	}
</style>

案例九：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="overlay"></div>
		<div id="win"><h2><span id="close">×</span></h2></div>
		<center><button>弹出层</button></center>
	</body>
</html>
<script type="application/javascript">
	window.onload = function (){
	var oWin = document.getElementById("win");
	var oLay = document.getElementById("overlay");	
	var oBtn = document.getElementsByTagName("button")[0];
	var oClose = document.getElementById("close");
	oBtn.onclick = function ()
	{
		oLay.style.display = "block";
		oWin.style.display = "block"	
	};
	oClose.onclick = function ()
	{
		oLay.style.display = "none";
		oWin.style.display = "none"	
	}
}
</script>
<style>
html,body{
	height:100%;
	overflow:hidden;
}
body,div,h2{
	margin:0;
	padding:0;
}
body{
	font:12px/1.5 Tahoma;
}
center{
	padding-top:10px;
}
button{
	cursor:pointer;
}
#overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.5;
	filter:alpha(opacity=50);
	display:none;
}
#win{
	position:absolute;
	top:50%;
	left:50%;
	width:400px;
	height:200px;
	background:#fff;
	border:4px solid #f90;
	margin:-102px 0 0 -202px;
	display:none;
}
h2{
	font-size:12px;
	text-align:right;
	background:#FC0;
	border-bottom:3px solid #f90;
	padding:5px;
}
h2 span{
	color:#f90;
	cursor:pointer;
	background:#fff;
	border:1px solid #f90;
	padding:0 2px;
}
</style>

JS小案例