【JS项目练习】控制Div属性

参考：http://www.fgm.cc/learn/

image.png

<script type="text/javascript">
    var changeStylr = function (elem, att, valu){
        elem.style[att] = valu
    };
    window.onload = function(){
        var but = document.getElementsByTagName("input");
        var chdiv = document.getElementById("div1");
        var att = ["width", "height", "background-color", "display", "display"];
        var val = ["200px", "200px", "red", "none", "block"];
        for(var i = 0; i < but.length; i++){
            but[i].index = i;
            but[i].onclick = function(){
                this.index == but.length-1 && (chdiv.style.cssText = "");
                changeStylr(chdiv, att[this.index], val[this.index])
            }
        }
    }
    </script>

【知识点】

1. elem.style[att] = valu
   对象属性要通过变量来访问的话用[ ]
2. but[i].index = i;
   为了闭包函数保存i值
3. this.index == but.length-1 && (chdiv.style.cssText = "");
   判断是否是最后一个“重置” 操作，如果是，执行后面的语句
4. chdiv.style.cssText = ""
   这个属性可以巧用，通过赋值为“”，可以将元素上所有的行内样式清空，达到重置的效果