js,其中一行代码不懂其作用

html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>控制div属性</title>
        <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>

</html>

我不明白那行代码是什么作用?把样式重置的原理是什么呢?谢谢了,本人js新人,不太懂

阅读 3.4k
3 个回答

这是js逻辑与(&&)的范畴,例如:var a = b && c,如果b为真,则a=c;反之b为假,则a=b;即&&只看左边的真假,不看右边的结果 如果这懂了,下来看你的问题,你&&两边是js语句, 只看左边的话,就是判断,即楼上所说的if(this.index == oBtn.length - 1 ),判断真假,若为真就执行右边的语句,即oDiv.style.cssText = "",如果还不明白,就回复我

等同于:
if(this.index === oBtn.length-1){
oDiv.style.cssText = "" ;
}

同楼上,等同于
if(this.index == oBtn.length - 1){ oDiv.style.cssText = ""; }

这里使用的是js的逻辑短路。例如:

1==1 && 2==1 && name='nick'

js会顺序执行逻辑判断语句,一直遇到表达式结果为false(这里2==1)或者结束为止,所以上例中的name没有被赋值

最经常出现的应用是用于兼容性的处理,例如:

var el = e.target || e.srcElement;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏