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

来源:3-2 编程练习

荣耀zyy

2016-08-11 18:48

<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>


写回答 关注

1回答

  • 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>


    荣耀zyy

    非常感谢!

    2016-08-11 23:05:25

    共 1 条回复 >

商城分类导航效果

两种方法实现分类导航,同时扩展讲解其它商城分类导航的制作方法

63737 学习 · 276 问题

查看课程

相似问题