style.left和offsetLeft、概念总结

var lis=document.getElementById("nav").children;
//因为通过循环坐的事件不能准确过的当时的准确下标。所以我们都手动通过自定义属性加上下标
for(var i=0;i<lis.length;i++){
    lis[i].setAttribute("data-index",i)
}

offsetLeft与style.left的区别

offsetLeft获取的是相对于父对象的左边距

left获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值，
这同offsetLeft是相同的，区别在于:
    1. style.left返回的是字符串，如28px, offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
    
    2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left
    
    3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，因为style.left获得的是行内样式，如果定义在css里，style.left的值仍然 为空，总是取不到style.left的值。offsetLeft则仍然能够取到，无需事先定义div的位置
    
概念总结
    循环：最基础的概念，所有重复的行为
    递归：在函数调用自身，将复杂情况逐步转化为基本情况
    迭代：按顺序访问线性结构中的每一项
    遍历：按规则访问非线性结构中的每一项