JS学习笔记

总结：

1. 注意body里的结构安排，全部装在大div，避免多次设置不同部分居中。

2. 一排按钮居中：装在大div里，text-align: center;

3. 把相同的部分封装成函数，即同个 oDiv，都是attr 属性设置 value。

var changeStyle = function (elem, attr, value)
{
    elem.style[attr] = value
};

4. 用数组的方式，把每个要设置的attr 和对应的 value 装起来，直接到数组里用this.index调用，避免代码重复。

var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];

5. 用for循环来加点击事件，获取当前点击的按钮，并调用前面封装的设置属性的函数。避免代码重复。

this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); 
且运算符，当第一个条件成立时，才运行第二步。 
即，当oBtn[i]是最后一个按钮的时候，才把cssText设置为空。 即重置样式。

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])
        };   
    };

<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>

错误记录：

    <script>
    var changeStyle = function(obj, attr, value) 
    {
        obj.style[attr] = value;
    }
    // 这种函数的位置应该在window.onload 外面还是里面？
    // 放在外面，和window.onload 平级。

    window.onload = function()
    {
        // var oDiv = document.getElementById('outer'); 这里不需要获取外层div，外层的只在设置css样式时发挥作用。
        var oDiv1 = document.getElementById('div1');  // 从div里获取元素，不能用ById ？
        var oBtn = oDiv.getElementsByTagName('input');

        var attr = ["width", "height", "background", "display"];
        // var value = [200, 200, "red", "none"];  注意传入函数里的值是字符串，不能直接写数字。
        var value = ["200px", "200px", "red", "none"];

        for (var i=0; i<oBtn.length; i++)
        {
            oBtn[i].index = i;
            oBtn[i].onclick = function()
            {
                // if(i = oBtn.length - 1)    还不是特别搞清楚 i 和 this.index
                if(this.index == oBtn.length - 1)
                {
                    oDiv1.style.cssText = '';
                } 
                else
                {
                    changeStyle(oDiv1, attr[this.index], value[this.index])
                };
            };
        };
    };
    </script>