因对前端开发感兴趣，于是自学前端技术，现在已经会HTML、CSS、JavaScript基础技术。但水平处于小白阶段，在网上找一些小项目练练手，促进自己的技术成长。文章记录自己的所思所想，以及借鉴前端大牛的思路，谨个人想法，存在不足，欢迎指正。
项目介绍：
从最简单的开始，在网上找到了一个简单的用JS控制DIV属性的小项目，咋一看很简单，自己动手之后才发现自己的代码之冗余和初阶，深深汗颜。先写自己想法路程，然后把大牛源码奉上，涉及相关知识点一一记录。
项目效果图
整体思路，先变量保存属性，然后写方法复用，遍历数组，添加方法，对重置的元素用&&判断并使用cssText方法。
不多说，上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制div的属性</title>
<style>
#outer {
width: 500px;
height: 500px;
margin: 100px auto 0;
padding: 0;
text-align: center;
border: 15px solid #FBB03B;
outline: 15px solid #709080;
border-radius: 1em;
}
h1 {
color: #FBB03B;
}
#div1 {
width: 100px;
height: 100px;
background: #F5F5D5;
margin: 10px auto;
display: block;
}
input {
border: 1px solid #FBB03B;
padding: 8px 20px;
color: #FBB03B;
background: #fff;
font-family: "微软雅黑";
outline: none;
cursor: pointer;
}
input:hover {
background: #FBB03B;
color: #fff;
}
</style>
<script>
// 创建改变样式的函数
var changeStyle = function(elem, attr, value) {
elem.style[attr] = value;
};
window.onload = function() {
// 获取每一个input标签
var oBtn = document.getElementsByTagName("input");
// 获取要改变的div盒子
var oDiv = document.getElementById("div1");
// 建立一个二维数组分别存放每个按钮要改变的属性和属性值
var oAtt = ["width", "height", "background", "display", "display"];
var oVal = ["300px", "300px", "#709080", "none", "block"];
// 遍历input标签
for(var i = 0; i < oBtn.length; i++) {
// 设置对应的index
oBtn[i].index = i;
// 绑定按钮点击事件
oBtn[i].onclick = function() {
// 重置按钮，清空之前的样式
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
// 调用changeStyle函数，当前按钮点击后，更改对应的样式
changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
}
}
}
</script>
</head>
<body>
<div id="outer">
<h1>控制div属性</h1>
<input type="button" value="变宽">
<input type="button" value="变高">
<input type="button" value="变色">
<input type="button" value="隐藏">
<input type="button" value="重置">
<div id="div1"></div>
</div>
</body>
</html>
1. CSS样式：
