【前端工程師手冊】前端應該知道的各類寬高

引子

曾經校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發中的實際場景，其中有須要用到某元素的高度，面試官問我clientHeight和offsetHeight的區別是什麼，我當時一臉懵逼，這個問題對於當時的我來講已經徹底超綱了...面試結果天然是面試官感謝我來參加面試...

好漢不提當年囧，今天總結一下常見的元素各類寬高。

一些height和width

clientHeight和clientWidth

沒有橫向滾動條時：clientHeight = css設置的height + paddingTop + paddingBottom

有橫向滾動條時：clientHeight = css設置的height + paddingTop + paddingBottom - 滾動條的高度

clientWidth相似，就再也不贅述

ps：這個屬性是隻讀屬性，對於沒有定義CSS或者內聯佈局盒子的元素爲0

offsetHeight和offsetWidth

offsetHeight = ccss設置的height + paddingTop + paddingBottom + borderTop + borderBottom

offsetWidth相似，就再也不贅述

scrollHeight和scrollWidth

無滾動條時：scrollHeight = clientHeight = css設置的height + paddingTop + paddingBottom

有滾動條時：scrollHeight = 實際內容的高度 + paddingTop + paddingBottom（即要算上由於滾動被遮住的內容高度

scrollWidth再也不贅述

一些Top和Left

clientLeft和clientTop

clientTop = borderTop
clientLeft = borderLeft

offsetLeft和offsetTop

以offsetTop爲例，搞懂它首先要明白offsetParent是什麼

offsetParent是元素最近的有定位的父元素，若是父元素中沒有有定位的，那麼就是最近的 table, table cell 或根元素。

offsetTop 和 offsetLeft 都是相對於offsetParent內邊距邊界的。

scrollTop和scrollLeft

scrollTop即爲向上滾動時，元素內容區被遮住的那一部分。

scrollLeft同理

參考

JavaScript 中的各類寬高屬性

MDN