js改变div属性

最新推荐文章于 2023-09-28 10:24:10 发布

J.WADE

最新推荐文章于 2023-09-28 10:24:10 发布

阅读量8k

点赞数

分类专栏： JS学习文章标签： js

本文链接：https://blog.csdn.net/qq_28147861/article/details/78311395

版权

JS学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			#show
			{
				background: red;
				width: 100px;
				height: 50px;
				float: left;
				margin-top: 15px;
				margin-left: 10px;
				color: white;
				display: block;
				float: left;
				
			}
			h1
			{
				float: left;
			}
			#link
			{
				width: 200px;
				height: 200px;
				border: 5px solid black;
				background: gainsboro;
				float: left;
				position:absolute;
				top: 100px;
				left: 100px;
			}
			#bg
			{
				position: absolute;
				display:none;
				left:0;
				top:0;
				z-index:10;
				background:#DCDBDC;
				-moz-opacity: 0.8;
				opacity:.80;
				filter: alpha(opacity=80);
				
			}
			#sz
			{
				position: absolute;
				display:none;
				width:500px;
				height:300px;
				left:50%;
				top:40%;
				z-index:11;
				background:#B8F764; 
			}
			#sz ul
			{
				margin: 0px;
				padding: 0px;
				width: 240px;
				height: 220px;
				float: left;
				
			}
			#sz ul li
			{
				line-height: 30px;
				text-align: center;
				width: 240px;
				height: 80px;
				list-style:none;
				
			}
		
			#sz div div
			{
				margin-left: 20px;
				line-height: 30px;
				text-align: center;
				width: 50px;
				height: 40px;
				float: left;
			}
			#sz a
			{
				float: left;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<h1>请为下面的div设置样式：</h1>
		<button id="show" οnclick="show()">点击设置</button>
		<div id="link"></div>
		<div id="bg" > </div>
		<div id="sz" >
			<div>
				<ul>
					<li>请选择背景颜色：
						
					</li>
					<li>请选择宽度（px）:
						
					</li>
					<li>请选择高度（px）:
						
					</li>
				</ul>
				<ul style="float: right;">
					<li>
						<div id="red" style="background: green;">红色</div>
						<div id="yellow" style="background: deepskyblue;">黄色</div>
						<div id="blue" style="background: pink;">蓝色</div>
					</li>
					<li>
						<div id="w200" style="background: whitesmoke;">200</div>
						<div id="w300" style="background: whitesmoke;">300</div>
						<div id="w400" style="background: whitesmoke;">400</div>
					</li>
					<li>
						<div id="h200" style="background: whitesmoke;">200</div>
						<div id="h300" style="background: whitesmoke;">300</div>
						<div id="h400" style="background: whitesmoke;">400</div>
					</li>
				</ul>
			</div>
			<div><a href="#" οnclick="returns()">恢复</a><a href="javascript:void(0)" οnclick="closeBox()">关闭</a></div>
			
		</div>
		<script>
			
			var link=document.getElementById("link");
			function closeBox()
			{
				bg.style.display="none";
				sz.style.display="none";
			}
			function show()
			{
				var bg=document.getElementById("bg");
				var sz=document.getElementById("sz");
				
				bg.style.width=document.body.scrollWidth + "px";
				bg.style.height=document.body.scrollHeight+"px";
				
				bg.style.display="block";
				sz.style.display="block";
			}
			
			function returns()
			{
				link.style.width="200px";
				link.style.height="200px";
				link.style.background="gainsboro";
			}
			var red=document.getElementById("red");
			var yellow=document.getElementById("yellow");
			var blue=document.getElementById("blue");
			
			var w200=document.getElementById("w200");
			var w300=document.getElementById("w300");
			var w400=document.getElementById("w400");
			
			var h200=document.getElementById("h200");
			var h300=document.getElementById("h300");
			var h400=document.getElementById("h400");
			
			red.οnmοuseοver=function()
			{
				link.style.background="red";
				red.style.background="red";
			}
			
			yellow.οnmοuseοver=function()
			{
				link.style.background="yellow";
				yellow.style.background="yellow";
			}
			
			blue.οnmοuseοver=function()
			{
				link.style.background="blue";
				blue.style.background="blue";
			}
			
			w200.οnmοuseοver=function()
			{
				link.style.width="200px";
				w200.style.background="bisque";
			}
			w300.οnmοuseοver=function()
			{
				link.style.width="300px";
				w300.style.background="bisque";
			}
			w400.οnmοuseοver=function()
			{
				link.style.width="400px";
				w400.style.background="bisque";
			}
			h200.οnmοuseοver=function()
			{
				link.style.height="200px";
				h200.style.background="bisque";
			}
			h300.οnmοuseοver=function()
			{
				link.style.height="300px";
				h300.style.background="bisque";
			}
			h400.οnmοuseοver=function()
			{
				link.style.height="400px";
				h400.style.background="bisque";
			}
			
			
			
		</script>
	</body>
</html>

J.WADE

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js改变div属性

body{ margin: 0px; padding: 0px; } #show { background: red; width: 100px; height: 50px; float: left; margin-top: 15px; margin-left: 10px; color: white;
复制链接

扫一扫