js案例——输入属性及属性值设置盒子样式

最新推荐文章于 2022-05-04 15:41:33 发布

VIP文章资本理念

最新推荐文章于 2022-05-04 15:41:33 发布

阅读量545

点赞数

分类专栏： web前端笔记总结

本文链接：https://blog.csdn.net/qq_43151638/article/details/102631334

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.inp{
			width: 100px;
			height: 100px;
			margin: 10px auto;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div>
		属性：
		<input type="text" id="property">
		属性值：
		<input type="text" id="arrtribute">
		<button type="button" id="btn">确认</button>
	</div>
	<div  class="inp" id="box"></div>
	<script type="text/javascript">
		var pro=document.getElementById('property');
		var arr=document.getElementById('arrtribute');
		var btn=document.getElementById('btn');
		var box=document.getElementById('box');
		// var proValue=null;
		// var arrValue=null;
		btn.onclick=function(){
			//获取提交到的值
			// proValue=pro.value;
			// arrValue=arr.value;
			//设置style的样式为proValue,值为arrValue
			// box.style[proValue]=arrValue;
			box.style[pro.value]=arr.value;
			//自动清空input里的内容
			pro.value='';
			arr.value='';
		}
	</script>
</body>
</html>

样式2：</

最低0.47元/天解锁文章

优惠劵

资本理念

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js案例——输入属性及属性值设置盒子样式

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .inp{ width: 100px; height: 100px; margin: 10px aut...
复制链接

扫一扫