通过输入框输入数字改变DIV大小

最新推荐文章于 2024-05-03 11:47:20 发布

刚好遇见小侯

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量466

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_61238657/article/details/122491575

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>通过输入数字改变DIV大小</title>

	<style type="text/css" >
		#leo{background: red;}
		
	</style>
	<script type="text/javascript" >
		window.onload=function(){
			var leo=document.getElementById("leo");
			var ipt=document.getElementById("ipt");
			ipt.onchange=function(){
				leo.style.width=leo.style.height=ipt.value +"px";
			};
			
			
        };
        
	</script>
</head>
<body>
	<input type="number" name="" value="200" id="ipt">
	<div id='leo'></div>

	<!-- 思路：1.把input框内输入的数字设置为div的宽和高
		 2.使用onchange事件,当输入框内的数字发生改变，
		 div的宽和高就直接赋值为input.value.
		 注意：因为获取的值为字符串，所以要使用+"px",
		      宽和高才可以使用 -->
</body>
</html>

优惠劵

刚好遇见小侯

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过输入框输入数字改变DIV大小

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>通过输入数字改变DIV大小</title> <style type="text/css" > #leo{background: red;} .
复制链接

扫一扫