控制div属性

本文主要介绍简单实现控制div属性,该例子也可作为闭包的一个实例(虽然对于闭包仍然知之不详),同时记录实现过程的一些思考。

简单demo地址

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>div块简单控制</title>
    <style type="text/css">
    #buttonDiv button{height: 50px;width: 100px;background-color: #ccc;margin:0 auto;text-align: center;}
    #theDivBlock{height: 400px;width: 400px;background: #aaa;margin:10px auto;display: block;}
</style>
<script type="text/javascript">
//创建一个函数,在后续onclick事件中直接调用
    var changeStyle=function(elem,attr,valu){
        elem.style[attr]=valu
    };

    window.onload=function(){

        //取得并设置相应的变量,oBtn保存的是一个nodelist集合
        var oBtn=document.getElementsByTagName("input");
        var oDiv=document.getElementById("theDivBlock");
        var oAtt=["width","height","background","display","display"];
        var oVal=["500px","500px","green","none","none"];

        for(var i=0;i<oBtn.length;i++){
            oBtn[i].index=i;

            //设置onclick函数,注意onclick中c为小写字母
            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="buttonDiv">
    <input type="button" value="变宽" />
    <input type="button" value="变高" />
    <input type="button" value="改变背景" />
    <input type="button" value="隐藏" />
    <input type="button" value="重置" />
</div>
<div id="theDivBlock"></div>
</body>
</html>

代码解析

关键点1:this.index==oBtn.length-1&&(oDiv.style.cssText="") 具体如何理解?

解析:&&操作符的短路用法:如果 && 左边的操作数(表达式)的值相当于false,则不对右边的操作数进行判断,直接返回 false。此处,只有当this.index==oBtn.length-1的值为true时,执行oDiv.style.cssText=""。
但是这种用法不提倡,可等价于

               if(this.index==oBtn.length-1){
                    oDiv.style.cssText="";
                }else{
                    changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
                }

关键点2:如果把 changeStyle(oDiv, Attr[this.index], Val[this.index]) 中的this.index直接以i代替,可以发现,按键的onclick事件没有任何反应,原因?

解析:问题出现在闭包上,问题分析如下:
1. 我给每个button的onclick动作都绑定了一个function
2. 我点击button,就要调用这个function
3. 这个function执行到changeSytle,开始寻找参数
4. 参数中有变量 i, i 是多少?
5. 先从当前的匿名函数的作用域找 i,没有找到
6. 接着到window.onload 绑定的匿名函数去找(注意javascript里面没有块级作用域概念),找到 i
7. i 是多少? i = oBtn.length,因为 window.onload 绑定的匿名函数返回后, 变量 i 的值是 oBtn.length
8. 这正是onclick绑定的匿名函数的作用域链中保存的 i 引用的值

关键点3:oDiv.style.cssText="" 这一句怎么实现重置效果?

解析:我个人的理解,可能跟JavaScript的作用域有关,用以下代码进行了简单的试验,试验结果如图

              if(this.index==oBtn.length-1){
                    oDiv.style.cssText="";
                    alert(oDiv.style.cssText);
                }else{
                    changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
                    alert(oDiv.style.cssText);
                }

加载完成页面的oDiv.style.cssText,可以看到,显示为空。


1.JPG

先点击宽度,后点击高度按钮,oDiv.style.cssText显示如图。


2.JPG

按顺序点击宽度、高度、隐藏按钮,oDiv.style.cssText显示如图。


3.JPG

关键点4:oAtt oVal两个变量的最后一个value其实并没有应用到,我试验了一下,去掉也没有影响,那么如果真的去掉会造成什么问题吗?

解析:根据我目前浅显的理论知识,我觉得最后两个变量去掉并不会有影响,但是又觉得应该保留最后的display跟block,所以到底可否去掉呢?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原生js练习,前辈的js原生练习,开始跟着做,收货很多。题目:控制div属性 解题思路: 每个按钮进行事件监听。 ...
    姚冰coding阅读 4,064评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,355评论 19 139
  • JavaScript的组成 JavaScript 由以下三部分组成:ECMAScript(核心):JavaScri...
    纹小艾阅读 9,114评论 0 3
  • 打开家门,迎接自己的依旧是冷清,貌似记得他们应该是去云南旅游去了。不过自己一个人在家也挺方便的。 我没有告诉Jis...
    否名阅读 2,515评论 0 2
  • 草绿湖蓝七月间, 临波鹤影舞蹁跹。 惊风掠起珠帘魅, 展翅高飞傲云天。 注:七月的呼伦贝尔真的好美,水美,草美,原...
    天水居士阅读 2,662评论 14 11