问答详情
源自：3-2 编程练习

代码中的Lis[i].i = i; 是什么意思？

<script type="text/javascript">

        window.onload = function () {

            var Lis = document.getElementsByTagName("li");

            for (i = 0; i < Lis.length; i++) {

                Lis[i].i = i;

               //设置鼠标移入时的样式。

                Lis[i].onmouseover = function () {

                    this.className = "lihover";

                }

                  //设置鼠标移开时的样式为空。

                Lis[i].onmouseout = function () {

                    this.className = "";

                }

            }

        }

    </script>


提问者：荣耀zyy 2016-08-11 18:48

个回答

  • Collus
    2016-08-11 21:37:16
    已采纳

    从字面解释就是：把变量i的值赋值给Lis[i]元素的i属性。这条语句主要用于获取每个<li>元素上边沿到顶部的距离。"Lis[i].i=i;"中有三个i，从左到右，第一个和第三个是相同的意思，表示存放<li>元素的数组Lis的下标。中间的i是动态添加给数组对象的属性（数组也是对象，所以可以动态添加属性）。

    PS：题注代码没贴全，这条语句是给下面代码中注释部分用的。

    <script type="text/javascript">
        window.onload = function () {
            var Lis = document.getElementsByTagName("li");
            for (i = 0; i < Lis.length; i++) {
                Lis[i].i = i;
                Lis[i].onmouseover = function () {
                    this.className = "lihover";

                    var h0 = (this.i - 1) * 30 + 42;//*获取li上边沿到顶端的距离
                    var y = this.getElementsByTagName("div")[0].offsetHeight;
                    var h = this.getElementsByTagName("div")[0].style.top + y;

                    if (h < h0) {
                        this.getElementsByTagName("div")[0].style.top = h0 + "px";
                    }

                    if (y > 550) {
                        this.getElementsByTagName("div")[0].style.top = "3px";
                    }
                }

                Lis[i].onmouseout = function () {
                    this.className = "";
                }
            }

        }
    </script>


    1