总结：

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. RTP 和 RTSP的区别

    RTP(Real-time Transport Protocol)是用于Internet上针对多媒体数据流的一种传输协议.RTP被定义为在一对一或一对多的传输情况下工作.其目的是提供时间信息和实现流同 ...

  2. 高阶函数sort

    排序中我们经常会用sort这个高阶函数,我们今天就来讲讲这个sort的比较机制,对于数字来说我们只需要比较他们的大小就可以了 但是 var arr =[15,81,9,4,3]; alert(arr. ...

  3. POJ 3037 SPFA

    题意: 思路: 我们可以发现 到每个点的速度是一样的 那这就成水题了-. 裸的SPFA跑一哈 搞定 //By SiriusRen #include <cmath> #include < ...

  4. ssh框架的总结

    一.spring:是基础,可以管理对象,也可以通过关键对象管理另一个框架.但是首先应该明确spring并不是只能应用于web方面,而是可以应用在一般的java项目中.只是如果在web环境下使用需要在w ...

  5. Dubbo springcloud

    简而言之,Dubbo确实类似于Spring Cloud的一个子集,Dubbo功能和文档完善,在国内有很多的成熟用户,然而鉴于Dubbo的社区现状(曾经长期停止维护,2017年7月31日团队又宣布重点维 ...

  6. 使用Java语言开发微信公众平台(三)

            在上一节课程中,我们来学习了微信公众平台最基础的一个接口——access_token,并且能够从微信公众平台中取到access_token. 那么,在本节课程中,我们要以上节课获取到的 ...

  7. C/C++(数据结构栈的实现)

    栈的实现 特点FILO(先进后出) 假设栈的空间为8 top == 0 不能出栈,已到栈底 top == 8 不能入栈,已到栈顶 top始终指向一个待插入的位置 push操作,1.写入数据,2.top ...

  8. CMDB学习之二数据采集

    首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...

  9. 【Pycharm】【HTML/jQuery】代码换行问题

    问题:从网上下载jQuery文件后发现代码太长,不利于阅读:Pycharm没有预先设置好js文件的自动换行设置 问题 解决办法 解决后

  10. 洛谷 P1256 显示图像

    P1256 显示图像 题目描述 古老的显示屏是由N×M个像素(Pixel)点组成的.一个像素点的位置是根据所在行数和列数决定的.例如P(2,1)表示第2行第1列的像素点.那时候,屏幕只能显示黑与白两种 ...