页面的三大家族

1 offsetWidth, offsetHeight 获取自身的宽度和高度 包括width+border+padding
2 
3 console.log(box.style.width, box.style.height); 只能获取行内的
4 
5 距离第一个有定位的父级盒子左边和上边的距离  box.offsetLeft, box.offsetTop,没有的话就是body
  box.offsetLeft, box.offsetTop 是从父盒子的padding开始计算的,不包括border 即是:从子盒子的边框到定位父盒子的距离

  offsetParent 返回当前对象的父级(有定位)盒子,可能是父级,还有可能是爷爷级别 获取的是节点
1      1)style.left只能获取行内的,而offsetLeft则可以获取到所有的;
2      2)offsetLeft 可以返回没有定位盒子距离左侧的位置;而style.left不可以,其只能返回有定位盒子的left;
3      3)offsetLeft 返回的是数字,而 style.left 返回的是字符串,除了数字外还带有单位:px;
4      4)offsetLeft是只读的,而style.left是可读写;
5      5)如果没有给 当前 元素指定过 top 样式,则 style.top 返回的是空字符串。
原文地址:https://www.cnblogs.com/zhangzhengyang/p/11198397.html