写在前面：
因对前端开发感兴趣，于是自学前端技术，现在已经会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样式：
实现多重边框，使用outline方案。
在某些情况下，你可能只需要两层边框，可以先设置一层常规边框，再加上outline(描边)属性来产生外层的边框。描边的好处在于，你可以通过outline-offset属性来控制它跟元素的边缘之间的间距，这个属性可以接受负值。
2. JavaScript方法：
cssText()定义和用法：
cssText 属性设置或返回作为字符串的样式声明的内容。this.index==oBtn.length-1 &&(oDiv.style.cssText="");
是指前半句this.index==oBtn.length-1为true时，执行下半句,也就是当遍历到重置按钮时，先清除之前添加的样式
tips:&&和||在javascript中的另类用法
a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；
a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；
&& 优先级高于 ||
console.log((1 && 3 || 0) && 4); // 结果4 ①
console.log(1 && 3 || 0 && 4); // 结果3 ②
console.log(0 && 3 || 1 && 4); // 结果4 ③
分析
语句①：1&&3 返回3 => 3 || 0 返回 3 => 3&&4 返回 4
语句②：先执行1&&3 返回3，在执行0&&4返回0，最后执行结果比较 3||0 返回 3
语句③：先执行0&&3 返回0，在执行1&&4返回4，最后执行结果比较 0||4 返回 4
注：非0的整数都为true，undefined、null和空字符串”" 为false。
总结：
这算是最最基础的js练习了，模仿过一遍熟悉了通过js控制css样式改变（不要太懒了，变量名都抄原作的……下次不这样了，囧）。
扫一扫
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
