Los resultados son los siguientes:
antes:
Después del cambio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid cadetblue;
font-size: 30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
属 性：<input type="text" placeholder="请输入CSS的属性"><br>
属性值：<input type="text" placeholder="请输入CSS的属性值"><br>
<button>设置</button>
<div id="div1">
不一样的烟火
</div>
<script>
var box = document.getElementById("div1");
var btn = document.getElementsByTagName("button")[0];
var ipt = document.getElementsByTagName("input");
// 鼠标的滑入滑出事件
box.onmouseenter = function (ev) {
box.innerText = "我就是我！"
}
box.onmouseleave = function (ev) {
box.innerText = "不一样的烟火"
}
// 设置按钮的点击事件
btn.onclick = function () {
// 获取属性
var a = ipt[0].value;
var b = ipt[1].value;
// 赋予样式 下面总共有三种方法：：：
// 第一种赋予样式的方法！
// box.style[a] = b;
// 第二种赋予样式的方法！
// box.setAttribute("style",a+":"+b);
// 第三种赋予样式的方法！
// box.style.cssText = a + ":" + b;
}
</script>
</body>
</html>
