常见的page，client，offset系列

1，前言

在日常开发中，这些系列的属性还是比较多的，因为容易混淆，所以每次要使用时，都得重新上MDN看一遍。觉得还是应该记录下来，给大家分享一下。

2，介绍

2.1，区分offsetX，pageX，clientX，

都是关于鼠标事件对象MouseEvent。

• 下面例子中，以X（水平方向）和点击事件来说明。

2.1.1 offsetX

• 是相对于事件对象的padding-left计算的。

如图所示，下面这个盒子，红色区域为border，白色区域为padding，123456为content。
所以，当点击左边的红色区域时，offsetX为负值！

2.1.2 pageX

• 相对于页面的左边缘计算的。不是当前视口（屏幕），和html,body的样式无关。

也就是说，如果产生了横向滚动条，比如向左滑动了200px，则此时，在距离当前视口左边100px的位置点击，获取的pageX为300px

2.1.3 clientX

• 相对于当前视口计算。与pageX唯一的区别：不受滚动条影响。

2.2，区分client方向系列，offset方向系列

2.2.1，client方向

• clientTop上边框，clientBottom下边框
• clientRight右边框宽度，如果元素出现滚动条，包括滚动条宽度。
• clientLeft左边框，如果元素出现滚动条，包括滚动条宽度。

如何让滚动条出现在左边？
让内容排列方式从右往左即可direction: rtl

2.2.2，offset方向

• 先来说一下offsetParent，一个元素的offsetParent，肯定是它的父（祖先）元素，分3种情况。

  1. 离自己最近的开启定位的元素（position不为static）
  2. 离自己最近的table元素，注意，不是指display的值!
  3. 如果上述2个都不满足，那就是根元素，html或body（不同浏览器理解的根元素不同）

• offsetLeft，指定元素，距离自己的offsetParent的左内边距的距离

  如下例所示，btn的offsetLeft为80

  <div class="wrap">
      <button class="btn">123456</button>
  </div>
  
  .btn {
    margin: 30px;
    /*下面的不影响结果*/
    border: 45px salmon solid;
    padding: 20px;
  }
  .wrap {
    padding-left: 50px;
    /*下面的不影响结果*/
    background: saddlebrown;
    width: 200px;
    height: 200px;
    position: absolute;
    /*margin-left: 80px;*/
  }
  复制代码

• 其他3个方向类似。

2.3，区分client宽高系列，offset宽高系列

js获取的都不带单位

2.3.1 client宽高

• clientWidth，获取自身的width+padding左右。
• clientHeight，获取自身的height+padding上下。

2.3.2 offset宽高

• 与client系列相比，唯一的区别：多了border

转载于:https://juejin.im/post/5b36285ff265da597f1c8a69