初衷
由於DOM元素位置和大小的屬性這塊和鼠標事件的知識點容易混淆，所以需要單獨總結一下，又不想把截圖存到本地，所以就有了這篇文章。如果有什麼地方寫的不對，還請私信或留言給我扶正! 謝謝。
爲了方便演示，先寫一些基本的代碼
html
<div><div>
css
/* 先把 body 的 8px margin 幹掉,看着太難受了 */
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid #000;
background-color: hotpink;
margin: 100px auto;
}
js
// 先拿到這個元素
var div = document.querySelector('div')
clientWidth、clientHeight
該屬性表示計算元素內部的寬度和高度，包括內邊距(padding)
console.log(div.clientWidth, div.clientHeight);
輸出的結果爲
如果內容超出了，元素出現了滾動條，那麼這個值就會發生改變，會減掉滾動條的寬高.
在 html 中添加一些內容，在 vscode 中輸入 lorem 即可
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa fuga dolorum impedit quisquam aspernatur quo iste esse, non repellendus eum placeat ullam, distinctio, eos tempore earum omnis officia quaerat laudantium.
</div>
把元素設置爲超出顯示滾動條
overflow:scroll;
這樣元素就會顯示滾動條了
然後再次運行代碼，查看輸出結果會發現 咦？
那麼這種計算就是把滾動條的寬度和高度減掉了
滾動條的寬度是 17px,所以結果就是 103px
offsetWidth、offsetHeight
返回元素的佈局寬度 (width/height + padding + border)
輸出的結果爲
scrollWidth、scrollHeight
返回元素內容實際的寬高,包括由於
overflow溢出而在屏幕上不可見的內容。
console.log(div.scrollWidth, div.scrollHeight);
運行結果 ,可以看出，它是包括隱藏的內容的,但是不包括 border
如果有滾動條呢，就會減去滾動條的寬高
運行結果
clientLeft、clientTop
表示元素邊框的寬度(粗細)
console.log(div.clientLeft,div.clientTop)
如果內容是從右向左顯示的，並且左邊出現垂直滾動條的話，
clientLeft會計算滾動條的寬度
給 div 添加樣式 direction: rtl; ,效果如下
運行結果: 就會加上滾動條的寬度來計算
offsetLeft、offsetTop
對於塊級元素來說，返回從當前元素的左上角想對於定位元素的父元素左上角的偏移量。 相當於定位元素的 left top 屬性。
修改代碼如下:
html
<div class="parent">
<div class="box"></div>
</div>
css
.parent {
width: 300px;
height: 300px;
border: 2px solid #000;
position: relative;
margin: 50px auto;
}
.box {
width: 100px;
height: 100px;
background-color: #f78;
position: absolute;
top: 50px;
left: 20px;
}
現在顯示是這樣的
這時候 offsetLect offsetTop 的值是這樣的
如果沒有定位的父元素，它是相對於窗口左上角的偏移量
var parent = document.querySelector('.parent')
console.log(parent.offsetLeft, parent.offsetTop);
因爲 parent 沒有定位的父元素，所以是根據可視區域左上角來定位的。
scrollLeft、scrollTop
可以獲取或設置元素的滾動條到元素左邊/頂部的距離
修改代碼
<div class="box">
這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量
這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量這個只讀屬性是元素內容寬度的一種度量
</div>
.box {
width: 300px;
height: 300px;
background-color: #f78;
position: absolute;
top: 50px;
left: 20px;
overflow: scroll;
}
由於內容超出，出現滾動條了
var div = document.querySelector('.box')
// 給 文檔 綁定一個點擊事件 ，這樣當滑動滾動條的時候再點擊文檔，就可以打印出當前滾動條對於頂部的位置了.
document.addEventListener('click', function () {
console.log(div.scrollTop, div.scrollLeft);
})
