总结：

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>

JS学习笔记 - fgm练习 - 多按钮控制同个div属性的更多相关文章

  1. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  2. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  3. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  4. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  5. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  6. JS学习笔记 - fgm练习 - 网页换肤

    总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...

  7. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  8. JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件

    <style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...

  9. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

随机推荐

  1. 【Uva 10817】Headmaster's Headache

    [Link]: [Description] 一个学校,有s门课程(1<=s <=8),里面本身已经有m个老师了,然后还想招聘n个老师: 给出这m个老师和n个来应聘的老师的信息; (c[i] ...

  2. qmake生成Visual Studio工程

    整个Qt在Windows中都可以通过批处理来编译,当编译好Qt后,会生成qmake.exe. 在没有安装Qt-VS-Addin的情况下,如何使用别人提供的Qt *.pro项目文件呢? 使用qmake可 ...

  3. 洛谷P3531 [POI2012]LIT-Letters

    题目描述 Little Johnny has a very long surname. Yet he is not the only such person in his milieu. As it ...

  4. Android实现QQ分享及注意事项

    一.获取APPID和帮助文档 在前面我介绍了关于Android中微信分享的文章< Android实现微信分享及注意事项>这一篇文章来看看关于QQ分享. 可以参看新手引导和接入说明:http ...

  5. C# 爬虫总结

    static void Main(string[] args) { //WebRequest request = WebRequest.Create("http://www.cnblogs. ...

  6. 如何监控和解决SQL Server的阻塞(1) (当前阻塞)

    1. 什么是"阻塞"? 阻塞是SQL数据库应用"锁"机制的一个副作用.当一个应用请求针对某个数据库对象(例如全表,某行数据, 或者是某个数据页)加锁后,那么这个 ...

  7. Checkpoint & cache & persist

    checkpoint checkpoint(检查点)是Spark为了避免长链路,大计算量的Rdd不可用时,需要长时间恢复而引入的.主要就是将通过大量计算而获得的这类Rdd的数据直接持久化到外部可靠的存 ...

  8. 删除D盘空目录 、检索大于10M的文件

    删除D盘空目录 @echo off for %%i in (d:\xx) do ( if exist %%i:\ ( for /f "delims=" %%a in ('dir / ...

  9. Linux - 用 Konstruct 安装 KDE 3.x

    make-kde3.x Linux - 用 Konstruct 安装 KDE 3.x 找个截图工具 khtml2png (http://khtml2png.sourceforge.net/), 现在都 ...

  10. 如何使用Linux套接字？

          我们知道许多应用程序,例如E-mail.Web和即时通信都依靠网络才能实现.这些应用程序中的每一个都依赖一种特定的网络协议,但每个协议都使用相同的常规网络传输方法.许多人都没有意识到网络协 ...