案例：通过用户输入值修改盒子样式
案例
通过用户输入值修改盒子样式
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过输入值修改盒子样式</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
background-color: skyblue;
text-align: center;
line-height: 200px;
}
/*类型选择器*/
input[type=button]{
width: 100px;
height: 20px;
background-color: coral;
}
</style>
</head>
<body>
<p>属 性： <input type="text" placeholder="请输入CSS属性"></p>
<p>属性值： <input type="text" placeholder="请输入CSS属性值"></p>
<p><input type="button" value="设置"></p>
<div class="box">我就是我</div>
<script>
// 获取标签
var inpu = document.getElementsByTagName("input");
var Div = document.getElementsByTagName("div")[0];
// 调用单击事件
inpu[2].onclick = function (){
// 获取input的value值
var a = inpu[0].value;
var b = inpu[1].value;
// 给div盒子添加样式
Div.style[a] = b;
// 设置完后，value值清空
inpu[0].value = "";
inpu[1].value = "";
};
// 鼠标划入划出事件
// 划入
Div.onmouseenter = function (){
Div.innerText = "我就是我，不一样的花火"
}
// 划出
Div.onmouseleave = function (){
Div.innerText = "悄悄的，我走了，不带走一片云彩"
}
</script>
</body>
</html>
