124-js动态调节元素_124.js-CSDN博客

本文链接：https://blog.csdn.net/qq_33781658/article/details/84945541




先来布局

<body>

	<div class="div_main">
		
		<div class="div_body01">
			
			<div class="div_edit">
				<span>宽度:</span>
				<input id="e_width" type="text" name="宽度">
			</div>
			<div class="div_edit">
				<span>高度:</span>
				<input id="e_height" type="text" name="高度">
			</div>
			<div class="div_edit">
				<span>背景色:</span>
				<input id="e_back" type="text" name="背景色">
			</div>
			<div class="div_edit">
				<span>边框:</span>
				<input id="e_border" type="text" name="边框">
			</div>
			<div class="div_edit">
				<span>圆角:</span>
				<input id="e_radius" type="text" name="圆角">
			</div>
			
			<input id="btn_set" class="btn_set" type="button" name="设置" value="设置">

		</div>

		<div class="div_body02">
			<div id="div_change" class="div_change"></div>
		</div>

	</div>

</body>

然后css文件
.div_main{
	border: 1px solid black;
	margin: 0px auto;
	width: 1280px;
	height: 640px;
}

.div_body01{
	width: 399px;
	height: 625px;
	background: lightpink;
	float: left;
	padding-top: 15px;
	border-right: 1px solid black;
}

.div_body02{
	width: 880px;
	height: 640px;
	background: lightblue;
	float: left;
}

.div_edit{
	width: 300px;
	height: 50px;
	background: lightgreen;
	margin: 15px auto 0px;
}

.btn_set{
	margin: 15px auto;
	display: block;
}

.div_change{
	width: 50px;
	height: 50px;
	border: 1px solid black;
	margin: 100px auto 0px;
	
}


然后动态调节

window.onload=function(){
	var btn_set=document.getElementById('btn_set');

	btn_set.onclick=function(){
		
		var e_width  =document.getElementById('e_width');
		var e_height  =document.getElementById('e_height');
		var e_back   =document.getElementById('e_back');
		var e_border   =document.getElementById('e_border');
		var e_radius  =document.getElementById('e_radius');

		var value_width=e_width.value;
		var value_height=e_height.value;
		var value_back=e_back.value;
		var value_border=e_border.value;
		var value_radius=e_radius.value;

		var box=document.getElementById('div_change');

		box.style.width=value_width;
		box.style.height=value_height;
		box.style.background=value_back;
		box.style.border=value_border;
		box.style.borderRadius=value_radius;

	}

}