經(jīng)常碰到offset、scroll、client這幾個關(guān)鍵字，每次都要各種實驗，這里總結(jié)一下。

兩張圖鎮(zhèn)樓，隨時翻閱

1. offset

offset 指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條、padding、border，不包括overflow隱藏的部分

offsetParent屬性返回一個對象的引用，這個對象是距離調(diào)用offsetParent的父級元素中最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素的引用。

• 如果當前元素的父級元素中沒有進行CSS定位（position為absolute/relative），offsetParent為body
• 如果當前元素的父級元素中有CSS定位（position為absolute/relative），offsetParent取父級中最近的元素

obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據(jù)的寬度，整型，單位：像素。offsetWidth = border-width*2+padding-left+width+padding-rightobj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據(jù)的高度，整型，單位：像素。offsetHeight = border-width*2+padding-top+height+padding-bottomobj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側(cè)位置，整型，單位：像素。offsetTop= offsetParent的padding-top + 中間元素的offsetHeight + 當前元素的margin-topobj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置，整型，單位：像素。offsetLeft= offsetParent的padding-left + 中間元素的offsetWidth + 當前元素的margin-left

2. scroll

scroll指滾動，包括這個元素沒顯示出來的實際寬度，包括padding，不包括滾動條、border

scrollHeight 獲取對象的滾動高度，對象的實際高度；

scrollLeft 設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop 設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth 獲取對象的滾動寬度

3. client

client指元素本身的可視內(nèi)容，不包括overflow被折疊起來的部分，不包括滾動條、border，包括padding

clientWidth 對象可見的寬度，不包括滾動條等邊線，會隨窗口的顯示大小改變

clientHeight 對象可見的高度

clientTop、clientLeft 這兩個返回的是元素周圍邊框的厚度，一般它的值就是0。因為滾動條不會出現(xiàn)在頂部或者左側(cè)

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結(jié)，如果發(fā)現(xiàn)錯誤，歡迎留言指出~

參考：

javascript的offset、client、scroll的總結(jié)筆記

[輕松弄清JavaScript中的offset、scroll、client](<https://my.oschina.net/longteng2013/blog/167023)

offset client scroll screen 關(guān)鍵字整理

歡迎大家關(guān)注我的專欄 《JavaScript 設(shè)計模式精講》

---

作者：SHERlocked93

鏈接：https://www.imooc.com/article/293726

來源：慕課網(wǎng)

本文原創(chuàng)發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請注明出處，謝謝合作

總結(jié)

以上是生活随笔為你收集整理的.net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。