offset、client、scroll

offset、client、scroll

3组和大小 位置相关的属性：offset、client、scroll

offset偏移量

• offsetParent用于获取定位的父级元素
• offsetParent和parentNode的区别

var box = document.getElementById('box');

// offsetParent   注意：获取距离当前元素最近的定位父元素，如果没有定位父元素此时是body
// position 定位元素。把元素放置到一个静态的、相对的、绝对的、或固定的位置中
console.log(box.offsetParent);

//获取box的坐标。offsetLeft：距离offsetParent的横向偏移
console.log(box.offsetLeft);
console.log(box.offsetTop);
// 获取box的大小，包括border和padding
console.log(box.offsetWidth);
console.log(box.offsetHeight);

客户区大小client

    // clientLeft 是border-left 的宽度
    console.log(box.clientLeft);
    // 获取大小。包括padding，但是不包括border和滚动条
    console.log(box.clientWidth);

滚动偏移scroll

    // box滚动出去的距离
    console.log(box.scrollLeft);
    console.log(box.scrollTop);
    // 内容的大小，包括padding 和未显示的内容，不包括滚动条
    console.log(box.scrollWidth);
    console.log(box.scrollHeight);

offsetHeight 元素的大小 + padding + border
clientHeight 元素的大小 + padding
scrollHeight 内容的大小 + padding

display = ‘block’;显示
display = ‘none’;隐藏

案例

• 拖拽案例
• 弹出层
• 放大镜案例
• 模拟滚动条
• 匀速动画函数
  position: relative/absolute;。改变盒子位置，首先需要脱离文档流。

       // 通过判断，保证页面上只有一个定时器在执行动画
      if (timerId) {
        clearInterval(timerId);
        timerId = null;
      }

• 变速动画函数
• 回到顶部
• 无缝轮播图