HTML元素样式设置-优快云博客

本文链接：https://blog.youkuaiyun.com/wcf1991/article/details/78369247

本文介绍了一个简单的HTML页面，通过JavaScript实现对页面中指定div元素样式的动态调整，包括背景颜色、宽度和高度的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>预热作业</title>
	<style>
		body,p,input{
			padding:0;margin:0;
		}
		a{
			text-decoration:none;
		}
		body{
			padding:20px;
			background:#f1f1f1;
		}
		#oDiv{
			width:100px;
			height:100px;
			background:#fff;
			border:2px solid black;
		}
		p input{
			width:60px;
			height:30px;
			background-color:red;
		}
		#seting{
			width:260px;
			height:140px;
			background-color:#999;
			padding:20px;
			position:absolute;
			left:700px;
			top:200px;
			display:none;
		}
		#box{
			width:208px;
			height:124px;
			background-color:#fff;
			padding:8px 26px;
		}
		#seting #box p{
			font:14px/30px "宋体";
			color:#000;
		}
		#seting #box p span{
			padding:2px;
		}
		#box input{
			width:60px;
			height:30px;
			background-color:blue;
			color:#fff;
		}
		input[type = "reset"]{
			margin-left:40px;
		}
		a{
			padding:2px;
			background-color:#e7e7e7;
			color:#000;
		}
		a:hover{
			background-color:#e54346;
			color:#000;
		}
		</style>
		<script>
			window.onload = function(){
				var oButton = document.getElementById("button");
				var oSeting = document.getElementById("seting");
				var oBody = document.getElementById("body");
				var oSetWithLittle = document.getElementById("set_width_little");
				var oSetWithMiddle= document.getElementById("set_width_middle");
				var oSetWithBig= document.getElementById("set_width_big");
				var oSetHeightLittle = document.getElementById("set_height_little");
				var oSetHeightMiddle= document.getElementById("set_height_middle");
				var oSetHeightBig= document.getElementById("set_height_big");
				var oSetRed = document.getElementById("set_red");
				var oSetBlue= document.getElementById("set_blue");
				var oSetYellow= document.getElementById("set_yellow");
				var oDiv = document.getElementById("oDiv");
				var oReset = document.getElementById("reset");
				var oSubmite = document.getElementById("submit");

				oButton.onclick = function(){
					oSeting.style.display = "block";
					oBody.style.background = "#808080";
				}

				oSetWithLittle.onclick = function(){
					oDiv.style.width = "200px";
				}

				oSetWithMiddle.onclick = function(){
					oDiv.style.width = "300px";
				}

				oSetWithBig.onclick = function(){
					oDiv.style.width = "400px";
				}

				oSetHeightLittle.onclick = function(){
					oDiv.style.height = "200px";
				}

				oSetHeightMiddle.onclick = function(){
					oDiv.style.height = "300px";
				}

				oSetHeightBig.onclick = function(){
					oDiv.style.height = "400px";
				}

				oSetRed.onclick = function(){
					oDiv.style.background = "red";
				}

				oSetBlue.onclick = function(){
					oDiv.style.background = "blue";
				}

				oSetYellow.onclick = function(){
					oDiv.style.background = "yellow";
				}
				oReset.onclick = function(){
					oDiv.style.width = "100px";
					oDiv.style.height = "100px";
					oDiv.style.background = "#fff";
				}

				oSubmite.onclick = function(){
					oSeting.style.display = "none";
					oBody.style.background = "#f1f1f1";
				}
			}
		</script>
</head>
<body id = "body">
	<p>请为下面的DIV设置样式：<input type = "button" value = "点击设置"/ id = "button"></p>
	<div id = "oDiv"></div>
	<div id = "seting">
		<div id = "box">
			<p>请选择背景色：
				<span id = "set_red" style = "background-color:#9cce00">红</span>
				<span id = "set_yellow" style = "background-color:#efbd00">黄</span>
				<span id = "set_blue" style = "background-color:#5a94ef">蓝</span>
			</p>
			<p>请选择宽(px)：
				<a href = "#"><span id = "set_width_little">200</span></a>
				<a href = "#"><span id= "set_width_middle">300</span></a>
				<a href = "#"><span id= "set_width_big">400</span></a>
			</p>
			<p>请选择高(px)：
				<a href = "#"><span id = "set_height_little">200</span></a>
				<a href = "#"><span id= "set_height_middle">300</span></a>
				<a href = "#"><span id= "set_height_big">400</span></a>
			</p>
			<input type = "reset" value = "恢复"/ id = "reset"><input type = "submit" value = "确定"/ id = "submit">
		</div>
	</div>
</body>
</html>

第0课--预热作业