原文位址: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。
元素相對位置:無。