常見的page，client，offset系列

非梧不棲發表於2018-06-29
client

1，前言

在日常開發中，這些系列的屬性還是比較多的，因為容易混淆，所以每次要使用時，都得重新上MDN看一遍。覺得還是應該記錄下來，給大家分享一下。

2，介紹

2.1，區分offsetX，pageX，clientX，

都是關於滑鼠事件物件MouseEvent。

  • 下面例子中，以X（水平方向）和點選事件來說明。

2.1.1 offsetX

  • 是相對於事件物件的padding-left計算的。

如圖所示，下面這個盒子，紅色區域為border，白色區域為padding，123456為content。
所以，當點選左邊的紅色區域時，offsetX為負值！

常見的page，client，offset系列

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

常見的page，client，offset系列

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

相關文章