這篇文章將為大家詳細講解有關offsetleft屬性的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
以offsetLeft為例進行說明，在不同的瀏覽器中其值不同，且與父元素的position屬性（relative,absolute,fixed）有關?，F分以下幾種情況說明：（測試所用的瀏覽器版本為：Chrome68.0.3440.106，opera54.0，Firefox61.0.1和IE11.0）
offsetleft怎么辦
在父元素均不設置position屬性時，在Chrome，opera和IE瀏覽器中offsetLeft是元素邊框外側到瀏覽器窗口內側的距離且body.offsetLeft=0,
在firefox瀏覽器中offsetLeft是元素邊框外側到body內側的距離body.offsetLeft=-邊框寬度
當父元素設置position元素時又分為兩種情況，
如果父元素時body且body設置了position屬性，在Chrome和opera瀏覽器中offsetLeft是元素邊框外側到body邊框外側的距離，
在IE和fireForx瀏覽器中offsetLeft是元素邊框外側到body邊框內側的距離
如果父元素不是body元素且設置了position屬性時，offsetLeft為元素邊框外側到父元素邊框內側的距離（各瀏覽器情況一致）。
offsetleft實例
下面通過實例進行說明（Chrome瀏覽器）：
Html結構為
Css樣式：將body，container，box,content的margin和padding都設置為10px，container長寬為300px，box長寬為100px，content長寬為50px，都設置寬度為5px的邊框。具體查看下方源代碼。
container.offsetWidth=container的width+padding+邊框寬度=300+2×10+2×5=330
console.log(container.offsetWidth)
關于“offsetleft屬性的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
