js off动画事件

每个假期都过得如此快10月一是2017年最后一个假期。不由感叹时间过得真快。我已上个月离职，一直在家休整，今天得空吧前几天学习的知识真理一下。

今天主要整理关于,offset系列的，动画是咱们全都工作中，不可缺少的部分

offset

offset：偏移，检测  （里面的属性可以更好的获取元素尺寸） 从左到右动画

offsetLest 取值会遇到四舍五入（取值不精准）

只有定位的盒子才可以移动

 

1、offsetHeight offsetWidth 可以检测盒子的宽高

       a）返回数值么有单位

       b）属于numde型

       c）offsetHeight=高 + 内边距 + 边框 （不包括外边距）

        d）offsetWidth=宽 + 内边距 + 边框 （不包括外边距）

var box=document.getElementsByTagName("div")[0];
    console.log(box.offsetHeight);
    console.log(box.offsetWidth); 240

2、offsetLeft  offsetTop 检测距离 父盒子 （父盒子必须有定位）左/上面的距离

      a）盒子 到 父盒子（ 父盒子有定位  包含盒子的内边距 。 不包含外边距，边框。）左边、上边的位置。

       b）如果父盒子没有定位则以body为准，该盒子与文档顶端的距离

var box1=document.getElementsByClassName("box")[0];
    console.log(box1.offsetLeft);
    console.log(box1.offsetTop);

3、offsetLeft 和 .style.left的区别

       a ）.style.left带有px,是字符串

            offsetLeft不带px,是数值

        b）offsetLeft可返回没有定位的盒子边距，没定位返回距离body的距离

        c）offsetLeft可读，.style.top可读写

       d）offsetLeft 是获取值   style.left赋值

 

4、offsetParent  返回选定元素最近的带有定位的父盒子元素

        a）父盒子中都没有定位，返回body

        b）如果有，谁有返回最近那个

<div class="word" style="position:relative;">
    <div>
        <div class="box"></div>
    </div>
</div>
<script>
    var box=document.getElementsByClassName("box")[0];
    console.log(box.offsetParent)
</script>