Web全栈20201129-js的dom操作案例

1. 元素尺寸
   offsetWidth 包含边框 内间距 内容区域
   clientWidth 不包含边框 的距离 内间距+内容区域
   style.width 行内样式内容区域的宽
   scrollWidth 元素的内容没有溢出 等价 client
2. 元素的偏移
   offsetTop offsetLeft当前元素相对定位的父元素的偏移距离
3. 闭包的使用

for (var i = 0; i < menu.length; i++) {
    
    
        //方案1 ：  事件内部  要拿到当前的i  操作闭包  把i闭包
        /*  (function (n) {
         menu[n].onmouseover = function () {
         console.log(n);
         }
         })(i);*/
        //方案2：  当前的i可以通过当前对象的属性来关联  直接使用
        menu[i].index = i;
        menu[i].onmouseover = function () {
    
    
            var this_w = this.offsetWidth;
            var transX = this_w * this.index + lineOffset;
            line.style.transform = "translatex(" + transX + "px)";
            //鼠标悬停当前的span  对应的li跑到对应的位置
            c_menu.style.transform = "translatex(" + (-this.index * 500) + "px)";
        }
    }
    menu = null;