Web前端学习——JS基础一之DIV格式变换

最新推荐文章于 2020-12-20 13:15:43 发布

Elson_tju

最新推荐文章于 2020-12-20 13:15:43 发布

阅读量766

点赞数

文章标签： web前端 javascript 博客

本文链接：https://blog.csdn.net/Elson_tju/article/details/46941981

版权

首先说一些废话，本人初学JS，很多不好的地方也烦请各位指教，多多交流

--------------------------------------------------------------------------------------------------分割线----------------------------------------------------------------------------------------------------

热身运动，题目来源——博客网易云课堂JS热身运动下

题目：

根据用户的配置设置DIV如下参数：

背景颜色：红色，黄色，蓝色

宽度：200px，300px，400px

高度：200px，300px，400px

恢复确定

（上述属性值为按钮值，按钮的功能对应其值）

代码实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS热身</title>
</head>
<script>
	window.onload = function(){
		var Obtn_red = document.getElementById('btn_red');
		var Obtn_yellow = document.getElementById('btn_yellow');
		var Obtn_blue = document.getElementById('btn_blue');
		var Obtn_h200 = document.getElementById('btn_h200');
		var Obtn_h300 = document.getElementById('btn_h300');
		var Obtn_h400 = document.getElementById('btn_h400');
		var Obtn_w200 = document.getElementById('btn_w200');
		var Obtn_w300 = document.getElementById('btn_w300');
		var Obtn_w400 = document.getElementById('btn_w400');
	    var Obtn_roll = document.getElementById('rollback');
		var Obtn_com  = document.getElementById('commit');
		var Odiv = document.getElementById('mydiv');
		
		Obtn_red.onclick = function(){
				Odiv.style.backgroundColor = "red";
		};
		Obtn_yellow.onclick = function(){
				Odiv.style.backgroundColor = "yellow";
		};
		Obtn_blue.onclick = function(){
				Odiv.style.backgroundColor = "blue";
		};
		
		Obtn_h200.onclick = function(){
				Odiv.style.height = "200px"	
		};
		Obtn_h300.onclick = function(){
				Odiv.style.height = "300px"	
		};
		Obtn_h400.onclick = function(){
				Odiv.style.height = "400px"	
		};
		
		Obtn_w200.onclick = function(){
				Odiv.style.width = "200px";	
		};
		Obtn_w300.onclick = function(){
				Odiv.style.width = "300px";	
		};
		Obtn_w400.onclick = function(){
				Odiv.style.width = "400px";	
		};
		
		Obtn_roll.onclick = function(){
				Odiv.style.width = "50px";
				Odiv.style.height = "50px";
				Odiv.style.backgroundColor = "white";	
		};
		
	};
</script>
<style>
.div{
	width:		50px;
	height:		50px;
	border:	    1px red solid;
	overflow:	hidden;
	zoom:       1;
}

.button-small {
  font-size: 12px;
  height: 25px;
  width:  50px
}
</style>

<body>

<h3>请设置您想要的DIV格式</h3>

颜色：<input class = "button-small" id = "btn_red" type = "button" value = "红色"/>
<input id = "btn_yellow" class = "button-small" type = "button" value = "黄色"/>
<input id = "btn_blue" class = "button-small" type = "button" value = "蓝色"/>
<br />

宽度：<input id = "btn_w200" class = "button-small" type = "button" value = "200px"/>
<input id = "btn_w300" class = "button-small" type = "button" value = "300px"/>
<input id = "btn_w400" class = "button-small" type = "button" value = "400px"/>
<br />

高度：<input id = "btn_h200" class = "button-small" type = "button" value = "200px"/>
<input id = "btn_h300" class = "button-small" type = "button" value = "300px"/>
<input name="按钮" type = "button" class = "button-small" id = "btn_h400" value = "400px"/>
<br /> 

操作：<input id = "rollback"  class = "button-small" type = "button" value = "恢复" />
<input id = "commit" class = "button-small" type = "button" value = "确定" />


<div class = "div" id = "mydiv"></div>

</body>
</html>

实现如下：

算是实现了基本的功能，对于弹出层或者样式的观赏性还有很大加强，会再努力！

Elson_tju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Web前端学习——JS基础一之DIV格式变换

首先说一些废话，本人初学JS，很多不好的地方也烦请各位指教，多多交流--------------------------------------------------------------------------------------------------分割线-------------------------------------------------------------
复制链接

扫一扫