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

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

　　一. offset

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

　　1、offsetParent屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用 offsetParent的父級(jí)元素中最近的(在包含層次中最靠近的)，并且是已進(jìn)行過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è)元素沒顯示出來的實(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被折疊起來的部分，不包括滾動(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)“尚武科技派”給我留言，大家可以交流一下自己的心得體會(huì)，共同學(xué)習(xí)進(jìn)步。