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

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

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

一. offset

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

1、offsetParent屬性返回一個對象的引用，這個對象是距離調(diào)用 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 屬性指定的父坐標的計算上側(cè)位置，整型，單位：像素。

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

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

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

二. scroll

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

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

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

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

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

三. client

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

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

2、clientHeight 對象可見的高度

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

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

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

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

廣告

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