概述
JS小练习，从今天开始，每日一题小练习，主要是用原生JS实现一些DOM操作和交互效果，主要目的是熟练JS对DOM操作的方法和解决问题的思路，如果有兴趣的同学可以一起来哦。
练习的例子地址：http://www.fgm.cc/learn/
除了对效果的实现，我会仔细学习原作者的代码并分析，对其中的解决思路，代码巧妙地方，自己不了解和大家容易忽略的地方进行总结，形式以博客为主。如有不正确的地方，还请大家批评指出，大家共同学习嘛！
效果图
CODE
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<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. elem.style[attr] = value这里为什么会这样写呢？如果是手快的话可能就elem.style.attr = value写完了，但是我尝试了一下之后发现，这样attr是不会当成一个变量来使用的，会当成一个属性来用，但是我们这里要使用变量怎么办呢？
我们把字符串attr当成一个对象来看，那我们要访问对象的属性时，是可以使用方括号来访问的，所以这里就使用了这种写法，get到了，感觉很实用。
2. oBtn[i].index = i;这里为什么要多一步赋值呢，直接在下面的方法中使用i不可以吗？
答案是：不可以。
我尝试了将函数中的i不进行赋值操作，并在下文直接使用，但是发现，所有的i 打印出来都是5。原来，这是因为JS中闭包，函数作用域的问题，JS中没有块级作用域。
相当于：
var i ;//全局变量
for (i = 0; i < oBtn.length; i++){
//这里可以访问到i
oBtn[i].onclick = function(){
//这里绑定的回调函数是匿名函数，不会执行，但是当事件发生调用函数时，循环已经结束了，所以拿的是最后的值
}
}
//这里访问到的是循环最后的结果 i=5;函数在预解释阶段，都被当成字符串存入堆内存，在真正执行时，才会被拿出来执行，数组中存储的，其实只是指向这个堆内存的指针，i并没有传进去，执行的时候i才被传进去。
“闭包”是指有权访问另一个函数作用域中的变量的函数。
JS中的闭包是比较难理解的东西，所以大家就多理解咯。可以搜索“JS闭包”来理解。
3. this.index == oBtn.length - 1 && (oDiv.style.cssText = "");为什么会有这样一条语句呢？
仔细看上下文，原来是为了判断是不是最后一个“重置”按钮。如果是我的话一般会直接用if语句判断，但是作者这里巧妙的利用了JS运算符。当前面的比较为“true”时，会执行后面的语句，同样达到了if判断的效果，豁然开朗的感觉。
4. oDiv.style.cssText = ""查了一下MDN，原来这个属性可以巧用，通过赋值为“”，可以将元素上所有的行内样式清空，达到重置的效果，nice有木有？
总结
今天的这小练习看似简单，但是自己动手写的时候会出现好多问题，看作者源码的时候会发现别人写的代码的巧妙。
主要收获四点：
1、对象属性要通过变量来访问的话用[ ]，
2、JS闭包
3、通过JS运算符来完成一些处理
4、elem.style.cssText 属性的用法
更新0313
对于第四点，我又尝试了另外两种写法，如下：
//方式一：
oDiv.removeAttribute("style")
//方式二：
oDiv.setAttribute('style','');
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
