這篇文章將為大家詳細講解有關(guān)JavaScript的offset、client、scroll家族屬性是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的徐州網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

offset家族

  偏移量(offset dimension)是javascript中的一個重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth這四個屬性。當然，還有一個偏移參照——定位父級offsetParent。本文將詳細介紹該部分內(nèi)容

定位父級

  在理解偏移大小之前，首先要理解offsetParent。人們并沒有把offsetParent翻譯為偏移父級，而是翻譯成定位父級，很大原因是offsetParent與定位有關(guān)

  定位父級offsetParent的定義是：與當前元素最近的經(jīng)過定位(position不等于static)的父級元素，主要分為下列幾種情況

1. 元素自身有fixed定位，offsetParent的結(jié)果為null

   當元素自身有固定定位時，我們知道固定定位的元素相對于視口進行定位，此時沒有定位父級，offsetParent的結(jié)果為null

   [注意]firefox瀏覽器有兼容性問題

    復制代碼

1. 元素自身無fixed定位，且父元素都沒有設(shè)置定位，offsetParent的結(jié)果為body

    復制代碼

1. 元素自身無fixed定位，且父級元素存在經(jīng)過定位的元素，offsetParent的結(jié)果為離自身元素最近的經(jīng)過定位的父級元素

    

        

    
復制代碼

1. 元素的offsetParent是null

console.log(document.body.offsetParent);//null復制代碼

偏移量

偏移量共包括了offsetHeight、offsetWidth、offsetLeft、offsetTop這四個屬性

offsetWidth

  offsetWidth表示元素在水平方向上占用的空間大小，無單位(以像素px計)

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 
復制代碼

offsetHeight

offsetHeight表示元素在垂直方向上占用的空間大小，無單位(以像素px計)

offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width復制代碼

測試：

	
		
		
		
	
	
		

		

	復制代碼

注意：如果想修改盒子的大小，請使用xxx.style.width進行設(shè)置。offsetWidth和offsetHeight是只讀屬性

offsetTop

offsetTop表示元素的上外邊框至offsetParent元素的上內(nèi)邊框之間的像素距離

offsetLeft

offsetLeft表示元素的左外邊框至offsetParent元素的左內(nèi)邊框之間的像素距離

測試:

	
		
		
		
	
	
		

			

		

		
	復制代碼

總結(jié)：相對于父元素（看父元素是否有定位，如果有定位，以父元素為基礎(chǔ)，如果沒有繼續(xù)往上尋找，如果一直沒有找到，則以body為基準）的左邊距和上邊距

求出當前元素的頁面偏移量

  要知道某個元素在頁面上的偏移量，將這個元素的offsetLeft和offsetTop與其offsetParent的相同屬性相加，并加上offsetParent的相應(yīng)方向的邊框，如此循環(huán)直到根元素，就可以得到元素到頁面的偏移量

    
復制代碼

client家族

  關(guān)于元素尺寸，一般地，有偏移大小offset、客戶端大小client和滾動大小scroll。前文已經(jīng)介紹過偏移屬性，后文將介紹scroll滾動大小，本文主要介紹客戶區(qū)大小client。

客戶區(qū)大小

  客戶區(qū)大小client指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小

clientWidth

  clientHeight屬性返回元素節(jié)點的客戶區(qū)高度

clientHeight = padding-top + height + padding-bottom復制代碼

clientHeight

  clientWidth屬性返回元素節(jié)點的客戶區(qū)寬度

clientWidth = padding-left + width + padding-right復制代碼

clientLeft

clientLeft屬性返回左邊框的寬度復制代碼

clientTop

clientTop屬性返回上邊框的寬度	
復制代碼

驗證

復制代碼

頁面大小

常用document.documentElement的client屬性來表示頁面大小(不包含滾動條寬度)

document.documentElement.clientWidth;document.documentElement.clientHeight;復制代碼

注意

1.所有的client屬性都是只讀的

復制代碼

2.如果給元素設(shè)置了display:none，則客戶區(qū)client屬性都為0

復制代碼

3.每次訪問客戶區(qū)client屬性都需要重新計算，重復訪問需要耗費大量的性能，所以要盡量避免重復訪問這些屬性。如果需要重復訪問，則把它們的值保存在變量中，以提高性能

      復制代碼

         
復制代碼

scroll家族

滾動寬高

scrollHeight

scrollHeight表示元素的總高度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分

scrollWidth

scrollWidth表示元素的總寬度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分

1. 沒有滾動條時，scrollHeight與clientHeight屬性結(jié)果相等，scrollWidth與clientWidth屬性結(jié)果相等

   復制代碼

2. 存在滾動條時，但元素設(shè)置寬高大于等于元素內(nèi)容寬高時，scroll和client屬性的結(jié)果相等

   復制代碼

滾動長度

scrollTop

  scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素數(shù)。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，表示元素上方不可見內(nèi)容的像素高度

scrollLeft

  scrollLeft屬性表示被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)。元素未滾動時，scrollLeft的值為0，如果元素被水平滾動了，scrollLeft的值大于0，且表示元素左側(cè)不可見內(nèi)容的像素寬度

當滾動條滾動到內(nèi)容底部時，符合以下等式

scrollHeight = scrollTop + clientHight復制代碼

與scrollHeight和scrollWidth屬性不同的是，scrollLeft和scrollTop是可寫的

    內(nèi)容
內(nèi)容
向下滾動向上滾動復制代碼

頁面滾動

  理論上，大部分的瀏覽器通過document.documentElement.scrollTop和scrollLeft可以反映和控制頁面的滾動；safari瀏覽器是通過document.body.scrollTop和scrollLeft來控制的

    

        內(nèi)容
內(nèi)容

    
    復制代碼

所以，頁面的滾動高度兼容寫法是

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop復制代碼

回到頂部

    
        
        
    
    
        回到頂部
        
    復制代碼

滾動方法

scrollTo(x,y)

  scrollTo(x,y)方法滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位于顯示區(qū)域的左上角

    回到頂部
    
    復制代碼

關(guān)于JavaScript的offset、client、scroll家族屬性是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。