案例：通过事件改变元素
案例：通过事件改变元素
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-left: 500px;
width: 300px;
height: 300px;
background-color: pink;
}
input{
margin-left: 500px;
width: 100px;
height: 30px;
background-color: gold;
}
</style>
</head>
<body>
<!--通过输入框输入值，点击按钮修改盒子样式-->
<div></div>
<input type="text" placeholder="请输入值">
<input type="button" value="设置宽度">
<script>
// 获取input对象 所有
var inpu = document.getElementsByTagName("input");
// 获取div对象 所有
var di = document.getElementsByTagName("div");
//通过获取 button 按钮触发单击事件 onclick
inpu[1].onclick = function (){
// 获取input输入框的值
var a = inpu[0].value;
// 改变盒子宽度
di[0].style.width = a
}
</script>
</body>
</html>
