js 通过函数传参，改变div任意属性的值

最新推荐文章于 2023-01-17 20:08:39 发布

原创最新推荐文章于 2023-01-17 20:08:39 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#修改div的任意属性值 #动态修改div的样式

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态修改HTML中DIV元素样式的技巧，通过输入属性名和属性值，可以即时更改显示效果，并提供了重置功能恢复原始样式。

在这里插入图片描述
输入属性名和属性值，会自动修改div的样式，点击重置按钮，会恢复到原来的样式。
完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<title>函数传参，改变Div任意属性的值</title>
		<style>
			body,p{margin:0;padding:0;}
			body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
			#outer{width:300px;margin:0 auto;}
			p{margin-bottom:10px;}
			button{margin-right:5px;}
			label{width:5em;display:inline-block;text-align:right;}
			input{padding:3px;font-family:inherit;border:1px solid #ccc;}
			#div1{
				color:#fff;
				width:180px;
				height:180px;
				background:#000;
				margin:0 auto;
				padding:10px;
			}
		</style>
		<script>
			window.onload = function(){
				var okBtn = document.getElementById("ok");
				var oReset = document.getElementById("reset")
				var oDiv = document.getElementById("div1");
				
				okBtn.onclick = function(){
					var propname = document.getElementsByName("prop")[0].value;
					var propval = document.getElementsByName("val")[0].value;
					oDiv.style[propname] = propval;
				}
				
				oReset.onclick = function(){//将原来的节点删除，重新添加一个新的div
					oDiv.remove();
					oDiv = document.createElement("div");
					oDiv.id = "div1";
					oDiv.innerHTML = '在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。';
					document.body.appendChild(oDiv);
				}
			}

		</script>
	</head>
	<body>
		<div id="outer">
			<p>
				<label>属性名：</label>
				<input name="prop" type="text" value="background">
			</p>
			<p>
				<label>属性值：</label>
				<input name="val" type="text" value="blue">
			</p>
			<p>
				<label></label>
				<button id="ok">确定</button>
				<button id="reset">重置</button>
			</p>
		</div>
		<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
	</body>
</html>