JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

原文位址：http://caibaojian.com/js-name.html

JS中擷取各種寬度和距離，常常讓我們混淆，各種浏覽器的不相容讓我們很頭疼，現在就在說說js中有哪些寬度和距離。

1、名詞解釋

• screen：螢幕。這一類取到的是關于螢幕的寬度和距離，與浏覽器無關，應該是擷取window對象的屬性。
• client：使用區、客戶區。指的是客戶區，當然是指浏覽器區域。
• offset：偏移。指的是目标甲相對目标乙的距離。
• scroll：卷軸、卷動。指的是包含滾動條的的屬性。
• inner：内部。指的是内部部分，不含滾動條。
• avail：可用的。可用區域，不含滾動條，易與inner混淆。

2、window

2.1、window.innerWidth/innerHeight

描述：浏覽器可見區域的内寬度、高度（不含浏覽器的邊框，但包含滾動條）。

相容：ie9/10、chrome、firefox。

示例（縮放浏覽器的寬度為1000px，高度為500px）：

alert(window.innerWidth);
// chrome/firefox/ie9/10=>1000
// ie6/7/8=>undefined
alert(window.innerHeight);
// chrome/firefox/ie9/10=>500
// ie6/7/8=>undefined      

2.2、window.outerWidth/outerHeight

描述：浏覽器外寬度（包含浏覽器的邊框，因各個浏覽器的邊框邊一樣，得到的值也是不一樣的）。

相容：ie9/10、chrome、firefox。

示例（縮放浏覽器的寬度為1000px，高度為500px）：

alert(window.outerWidth);
// chrome/firefox/ie9/10=>1002
// ie6/7/8=>undefined
alert(window.outerHeight);
// chrome/firefox/ie9/10=>502
// ie6/7/8=>undefined      

注意：沒有window.width屬性。

2.3、window.screenLeft/screenTop

描述：浏覽器的位移，表示：

• ie浏覽器的内邊緣距離螢幕邊緣的距離。
• chrome浏覽器的外邊緣距離螢幕邊緣的距離。

如圖：

相容：ie6/7/8/9/10、chrome。

示例：

alert(window.screenLeft);
// ie=>87
// chrome=>86
// firefox=>undefined

alert(window.screenTop);
// ie=>87
// chrome=>86
// firefox=>undefined
   
    
        
  
             

2.4、window.screenX/screenY

描述：浏覽器的位移，表示：

• ie9/10浏覽器的外邊緣距離螢幕邊緣的距離。
• chrome浏覽器的外邊緣距離螢幕邊緣的距離。

由此可知，chrome的screenLeft和screenX是相等的（其目的是為了相容ie和firefox，兩個屬性都兼備了，但更趨向于firefox，chrome的這種做法不止這一處，還有很多，其實這種做法便于開發者移植，但對開發者的開發過程産生了一定的混淆），ie9/10的screenLeft是大于screenX的，如圖：

【圖】

相容：ie9/10、chrome、firefox。

示例：

alert(window.screenX);
// chrome/firefox=>86
// ie9/10=>79
// ie6/7/8=>undefined

alert(window.screenY);
// chrome/firefox=>86
// ie9/10=>79
// ie6/7/8=>undefined
   
    
        
  
             

2.5、window.pageXOffset/pageYOffset

描述：表示浏覽器X軸（水準）、Y軸（垂直）滾動條的偏移距離。

相容：ie9/10、chrome、firefox。

示例：

document.οnclick=function(){
    alert(window.pageXOffset);
    // chrome=>200
    // firefox=>200
    // ie9/10=>200
    // ie6/7/8=>undefined
    alert(window.pageYOffset);
    // chrome=>200
    // firefox=>200
    // ie9/10=>200
    // ie6/7/8=>undefined
};
   
    
        
  
             

2.6、window.scrollX/scrollY

描述：表示浏覽器X軸（水準）、Y軸（垂直）滾動條的偏移距離。由此可知，在chrome和firefox中window.pageXOffset和window.scrollX是相等的，具體為什麼會出現兩個相等的屬性值，不得而知。

相容：chrome、firefox。

示例：

document.οnclick=function(){
    alert(window.scrollX);
    // chrome=>200
    // firefox=>200
    // ie6/7/8/9/10=>undefined

    alert(window.scrollY);
    // chrome=>200
    // firefox=>200
    // ie6/7/8/9/10=>undefined
};
   
    
        
  
             

3、screen

3.1、screen.width/height

描述：螢幕的寬度、高度（指的是螢幕的分辨率，機關為像素）。

相容性：ie6/7/8/9/10、chrome、firefox。

示例（螢幕的分辨率為1440×900）：

alert(screen.width);
// chrome/firefox/ie6/7/8/9/10=>1440
alert(screen.height);
// chrome/firefox/ie6/7/8/9/10=>900
   
    
        
  
             

注意：此處必須是screen.width，而不是screenWidth，與接下來要說的各種寬度有所差別。

3.2、screen.availWidth/availHeight

描述：螢幕的可用寬度、高度（通常與螢幕的寬度、高度一緻）。

相容性：ie6/7/8/9/10、chrome、firefox。

示例：

alert(screen.availWidth);
// chrome/firefox/ie6/7/8/9/10=>1440
alert(screen.availHeight);
// chrome/firefox/ie6/7/8/9/10=>900
   
    
        
  
             

4、element

元素的寬度、位移、距離以元素的盒模型為

content-box

為例。即：

box-sizing: content-box;
   
    
        
  
             

其他盒模型計算會有差異，請勿對号入座。

4.1、elment.clientWidth/clientHeight

描述：計算如下，

• 有滾動條時：clientWidth=元素左内邊距寬度+元素寬度+元素右内邊距寬度-元素垂直滾動條寬度
• 無滾動條時：clientWidth=元素左内邊距寬度+元素寬度+元素右内邊距寬度

使用該特性可以計算出的滾動條寬度（即設定元素的内容寬度超過元素寬度，然後分别設定是否超過隐藏，兩次的clientWidth內插補點就是滾動條的寬度）。

相容：chrome、firefox、ie6/7/8/9/10。

示例（寬度和高度都為100px，邊框為50px，内邊距為60px，外邊距為70px，左、上位移為80px，滾動條的寬度因系統不同而不同）：

// 有滾動條=>paddingLeftWidth+width+paddingRightWidth-scrollYWidth
// 無滾動條=>paddingLeftWidth+width+paddingRightWidth
alert(oDemo.clientWidth);
// 有滾動條=>60+100+60-17=203
// 無滾動條=>60+100+60=220

// 有滾動條=>paddingTopWidth+height+paddingBottomWidth-scrollYHeight
// 無滾動條=>paddingTopWidth+height+paddingBottomWidth
alert(oDemo.clientHeight);
// 有滾動條=>60+100+60-17=203
// 無滾動條=>60+100+60=220
   
    
        
  
             

4.2、element.clientLeft/clientTop

描述：clientLeft為左邊框寬度，clientTop為上邊框寬度。

相容：chrome、firefox、ie6/7/8/9/10。

示例（寬度和高度都為100px，邊框為50px，内邊距為60px，外邊距為70px，左、上位移為80px，滾動條的寬度因系統不同而不同）：

// borderLeftWidth
alert(oDemo.clientLeft);
// =>50

// borderTopWidth
alert(oDemo.clientTop);
// =>50
   
    
        
  
             

4.3、element.offsetWidth/offsetHeight

描述：offsetWidth=元素左邊框寬度+元素左内邊距寬度+元素寬度+元素右内邊距寬度+元素右邊框寬度。

相容：chrome、firefox、ie6/7/8/9/10。

示例（寬度和高度都為100px，邊框為50px，内邊距為60px，外邊距為70px，左、上位移為80px，滾動條的寬度因系統不同而不同）：

// borderLeftWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
alert(oDemo.offsetWidth);
// =>50+60+100+60+50=320

// borderTopWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
alert(oDemo.offsetWidth);
// =>50+60+100+60+50=320
   
    
        
  
             

4.4、element.offsetLeft/offsetTop

描述：表示該元素相對于最近的定位祖先元素的距離，

chrome：offsetLeft=定位祖先左邊框寬度+定位祖先元素左内邊距寬度+左位移+左外邊距寬度

ie6/7/8/9/10、firefox：offsetLeft=定位祖先元素左内邊距寬度+左位移+左外邊距寬度。

chrome比其他浏覽器多計算了定位祖先元素的邊框。offsetTop同理。

相容：chrome、firefox、ie6/7/8/9/10。

示例（寬度和高度都為100px，邊框為50px，内邊距為60px，外邊距為70px，左、上位移為80px，滾動條的寬度因系統不同而不同）：

// 以最近的定位祖先元素為準
// 谷歌=>parentBorderLeftWidth+parentPaddingLeftWidth+left+marginLeft
// 其他=>parentPaddingLeftWidth+left+marginLeft
alert(oDemo.offsetLeft);
// chrome=>20+10+80+70=180
// ie6/7/8/9/10/firefox=>160

// 以最近的定位祖先元素為準
// 谷歌=>parentBorderTopWidth+parentPaddingTopWidth+left+marginLeft
// 其他=>parentBorderTopWidth+left+marginLeft
alert(oDemo.offsetLeft);
// chrome=>20+10+80+70=180
// ie6/7/8/9/10/firefox=>160
   
    
        
  
             

4.5、element.scrollWidth/scrollHeight

描述：計算方法如，

• 有滾動條時：
  • chrome、firefox、ie8/9/10：左内邊距寬度+内容寬度。
  • ie6/7：左内邊距寬度+内容寬度+右内邊距寬度（是由CSS的BUG引起）。
• 無滾動條時：左内邊距寬度+寬度+右内邊距寬度。

相容：chrome、firefox、ie8/9/10、ie6/7（半相容）。

示例（寬度和高度都為100px，邊框為50px，内邊距為60px，外邊距為70px，左、上位移為80px，滾動條的寬度因系統不同而不同，内容寬度和高度都為200px）：

// 有滾動條=paddingLeftWidth+contentWidth
// 有滾動條(ie6/7)=paddingLeftWidth+contentWidth+paddingRightWidth
// 無滾動條=paddingLeftWidth+width+paddingRightWidth
alert(oDemo.scrollWidth);
// 有滾動條=>200+60=260
// 有滾動條(ie6/7)=>200+60+60=320
// 無滾動條=>100+60+60=220

// 有滾動條=paddingTopWidth+contentWidth
// 有滾動條(ie6/7)=paddingTopWidth+contentWidth+paddingBottomWidth
// 無滾動條=paddingTopWidth+width+paddingBottomWidth
alert(oDemo.scrollHeight);
// 有滾動條=>60+200=260
// 有滾動條(ie6/7)=>60+200+60=320
// 無滾動條=>60+100+60=220
   
    
        
  
             

4.6、element.scrollLeft/scrollTop

描述：獲得水準、垂直滾動條的距離。

相容：chrome、firefox、ie6/7/8/9/10。

示例（寬度和高度都為100px，邊框為50px，内邊距為60px，外邊距為70px，左、上位移為80px，滾動條的寬度因系統不同而不同）：

document.οnclick=function(){
    // 水準滾動條左距離
    alert(oDemo.scrollLeft);

    // 垂直滾動條上距離
    alert(oDemo.scrollTop);
}
   
    
        
  
             

5、總結

因為document.documentElement就是浏覽器的html标簽，是以擷取浏覽器的相關屬性，也可以用該對象來擷取。

螢幕寬度：window.screen.width。

浏覽器内寬度：window.innerWidth || document.documentElement.clientWidth。

元素内容寬度：element.clientWidth。

元素占位寬度：element.offsetWidth。

元素相對位置：無。