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

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

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

一. offset

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

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

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

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

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

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

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

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

obj.offsetTop 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算上側(cè)位置，整型，單位：像素。

5、offsetTop= offsetParent的padding-top + 中間元素的offsetHeight + 當(dāng)前元素的margin-top

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

offsetLeft= offsetParent的padding-left + 中間元素的offsetWidth + 當(dāng)前元素的margin-left

二. scroll

scroll指滾動(dòng)，包括這個(gè)元素沒顯示出來(lái)的實(shí)際寬度，包括 padding，不包括滾動(dòng)條、 border

1、scrollHeight 獲取對(duì)象的滾動(dòng)高度，對(duì)象的實(shí)際高度;

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

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

4、scrollWidth 獲取對(duì)象的滾動(dòng)寬度

三. client

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

1、clientWidth 對(duì)象可見的寬度，不包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變

2、clientHeight 對(duì)象可見的高度

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

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

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

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

廣告

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