快速了解JS中的offset、scroll、client

在下開發(fā)中經(jīng)常碰到 offset、scroll、client 這幾個關鍵字，比如 offsetLeft、offsetHeight、scrollHeight、clientTop 什么的，每次都要各種實驗，這里總結一下，一勞永逸，接下來就由成都網(wǎng)站建設工程師來為大家講解。

首先兩張圖鎮(zhèn)樓，方便隨時翻閱。

一. offset

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

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

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

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

2、obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據(jù)的寬度，整型，單位：像素。

3、offsetWidth = border-width*2+ padding-left+ width+ padding-right

obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據(jù)的高度，整型，單位：像素。

4、offsetHeight = border-width*2+ padding-top+ height+ padding-bottom

obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側位置，整型，單位：像素。

5、offsetTop= offsetParent的padding-top + 中間元素的offsetHeight + 當前元素的margin-top

obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置，整型，單位：像素。

offsetLeft= offsetParent的padding-left + 中間元素的offsetWidth + 當前元素的margin-left

二. scroll

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

1、scrollHeight 獲取對象的滾動高度，對象的實際高度;

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

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

4、scrollWidth 獲取對象的滾動寬度

三. client

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

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

2、clientHeight 對象可見的高度

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

以上屬于成都網(wǎng)站建設工程師的個人觀點，大家如果對此有著不同的見解，可以關注公眾號“創(chuàng)新互聯(lián)派”給我留言，大家可以交流一下自己的心得體會，共同學習進步。

網(wǎng)站欄目：快速了解JS中的offset、scroll、client
鏈接地址：http://www.bm7419.com/news49/323549.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站營銷、網(wǎng)站排名、網(wǎng)站建設、軟件開發(fā)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)