JavaScript属性操作1

Lvdon9

于 2018-12-25 22:05:05 发布

阅读量224

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85254954

版权

JavaScript 专栏收录该内容

106 篇文章

订阅专栏

本文介绍了一种通过JavaScript动态修改HTML元素样式的实现方法。用户可以输入想要改变的CSS属性名称及属性值，代码将根据用户输入实时更新指定div元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width:240px;
				height: 200PX;
				border: 1px solid #333;
				background: #F1F1F1F;
				padding: 10px;
			}
		</style>
		<script>
			window.onload=function()
			{
				var oAttr=document.getElementById('attr');
				var oVal=document.getElementById('val1');
				var oBtn=document.getElementById('btn1');
				var oDiv=document.getElementById('div1');
				
				oBtn.onclick=function(){
					oAttr.value	//width
					oVal.value  //200px value
					
					oDiv.style[oAttr.value]=oVal.value;
				}
			
			}
		</script>
	</head>
	<style>
		div{
			width:100px;
			height: 100px;
			border: 1px solid red;
			
		}
	</style>
	<body>
		请输入属性名称:<input id="attr" type="text"/>
		请输入属性值:<input id="val1" type="text"/>
		<input type="button" value="确定"  id="btn1"/>
		<div id="div1"></div>
	</body>
</html>