JS 中的offset、scroll、client總結

The question 發布于2019-08-23 10:54 / 2662人閱讀

摘要：兩張圖鎮樓，隨時翻閱指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條，不包括隱藏的部分屬性返回一個對象的引用，這個對象是距離調用的父級元素中最近的在包含層次中最靠近的，并且是已進行過定位的容器元素。

經常碰到offset、scroll、client這幾個關鍵字，每次都要各種實驗，這里總結一下。

兩張圖鎮樓，隨時翻閱

1. offset

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

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

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

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

obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據的寬度，整型，單位：像素。
offsetWidth = border-width*2+padding-left+width+padding-right

obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據的高度，整型，單位：像素。
offsetHeight = border-width*2+padding-top+height+padding-bottom

obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側位置，整型，單位：像素。
offsetTop= offsetParent的padding-top + 中間元素的offsetHeight + 當前元素的margin-top

obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置，整型，單位：像素。
offsetLeft= offsetParent的padding-left + 中間元素的offsetWidth + 當前元素的margin-left

2. scroll

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

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

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

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

scrollWidth 獲取對象的滾動寬度

3. client

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

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

clientHeight 對象可見的高度

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

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：

javascript的offset、client、scroll的總結筆記

輕松弄清JavaScript中的offset、scroll、client

offset client scroll screen 關鍵字整理

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

云服務器 GPU云服務器 js滾動scroll vps日常維護中的一些要點總結 js總結 js數據加密總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96805.html

JS 中的offset、scroll、client總結

摘要：兩張圖鎮樓，隨時翻閱指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條，不包括隱藏的部分屬性返回一個對象的引用，這個對象是距離調用的父級元素中最近的在包含層次中最靠近的，并且是已進行過定位的容器元素。經常碰到offset、scroll、client這幾個關鍵字，每次都要各種實驗，這里總結一下。兩張圖鎮樓，隨時翻閱 showImg(https://segmentfault.c...

jerryloveemily 2019-08-02 11:13 評論0 收藏0
JS寬高（client、offset、scroll）的介紹

摘要：問題今日頭條的一道筆試題，的區別。結果如圖更詳細的介紹，請點擊問題今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區別。分析 JS中document對象的寬高有三種，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

mj 2019-08-20 18:21 評論0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上來不說話，先拋出幾個問題是時候談談它們之間的區別了，是不是已經混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

Jokcy 2019-08-19 18:44 評論0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上來不說話，先拋出幾個問題是時候談談它們之間的區別了，是不是已經混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

tolerious 2019-08-01 15:27 評論0 收藏0
JavaScript中的各種寬高屬性

摘要：在中，存在著多的關于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當前顯示文檔的。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。在js中，存在著N多的關于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評論0 收藏0