天天看點

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浏覽器的外邊緣距離螢幕邊緣的距離。

如圖:

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

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

示例:

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

alert(window.screenTop);
// ie=>87
// chrome=>86
// firefox=>undefined
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
};
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
};
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

注意:此處必須是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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

4、element

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

content-box

為例。即:

box-sizing: content-box;
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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

4.1、elment.clientWidth/clientHeight

描述:計算如下,

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

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

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

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

JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
// 有滾動條=>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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

4.2、element.clientLeft/clientTop

描述:clientLeft為左邊框寬度,clientTop為上邊框寬度。

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

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

JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
// borderLeftWidth
alert(oDemo.clientLeft);
// =>50

// borderTopWidth
alert(oDemo.clientTop);
// =>50
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

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);
}
   
    
        
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

5、總結

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

螢幕寬度:window.screen.width。

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

元素内容寬度:element.clientWidth。

元素占位寬度:element.offsetWidth。

元素相對位置:無。

繼續閱讀