關於JS原生的offset的一些簡單理解

offset這個屬性,可以說是非常有用的,顧名思義,offset翻譯過來就是偏移量,從名字就可以看出它的具體意義了。也即是元素相當於父元素的偏移量。

offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五個部分,直白的翻譯過來分別是上偏移、左偏移、偏移寬度、偏移高度、偏移父級。翻譯雖不夠恰當,但仍可體現出其大致意義。

offsetTop: 元素相對父元素上方的偏移。

offsetLeft: 元素相對父元素左邊框的偏移。

offsetWidth: 自身包括padding 、 邊框、內容區的寬度。

offsetHeight: 自身包括padding、邊框、內容去的高度。

offsetParent: 作爲偏移參照點的父級元素。

其中需要注意的是:

    1、offsetTop和offsetLeft都是相對父元素的邊框內部的偏移量。也即是元素邊框外部到父元素邊框內部的距離。

    2、offsetParent通常並不是元素的直接上級元素,而是指的離元素最近的設置過position(即position不爲static)的父級元素,最多查詢到body。即父級元素中不存在設置過position的元素時,其offsetParent爲body;position=fixed元素的offsetParent爲null;body元素的offsetParent爲null。

    3、position爲fixed的元素,其offsetParent爲null,但是計算offsetTop和offsetLeft時,可將其認爲是瀏覽器視口。

    4、但對於offsetParent同樣爲null的body,其offsetTop和offsetLeft永遠爲0。

    5、所有的值都不帶單位px,可以直接使用。

    6、原生js中有個跟offset作用很類似的函數就是getBoundingClientRect(),它也可以獲取元素偏移量和寬高,其中寬高的計算方式相同,但是在計算便宜量時,經過測試此函數永遠是相對瀏覽器視口進行計算的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章