[JavaScript]ブラウザの高さと幅の値を取得します.
4003 ワード
IE中:
Dcument.body.clientWidth=>BODYオブジェクト幅
Dcument.body.clientHeight=>BODYオブジェクト高さ
document.documentElement.client Width=>可視領域幅
Dcument.documentElement.clientHeight=>可視領域の高さ
FireFox中:
Dcument.body.clientWidth=>BODYオブジェクト幅
Dcument.body.clientHeight=>BODYオブジェクト高さ
document.documentElement.client Width=>可視領域幅
Dcument.documentElement.clientHeight=>可視領域の高さ
Operaにおいて:
Dcument.body.clientWidth=>可視領域幅
Dcument.body.clientHeight=>可視領域の高さ
document.documentElement.clientWidth=>ページオブジェクト幅
document.documentElement.clientHeight=>ページオブジェクトの高さ(すなわち、BODYオブジェクトの高さにMarginの高さを加える)
W 3 Cの規格が定義されていない場合、IEは:
document.documentElement.client Width=>0
document.documentElement.clientHeight=>0
FireFoxは以下の通りです
document.documentElement.clientWidth=>ページオブジェクト幅
document.documentElement.clientHeight=>ページオブジェクトの高さ(すなわち、BODYオブジェクトの高さにMarginの高さを加える)
Operaは:
document.documentElement.clientWidth=>ページオブジェクト幅
document.documentElement.clientHeight=>ページオブジェクトの高さ(すなわち、BODYオブジェクトの高さにMarginの高さを加える)
ページの可視領域は広いです.Dcument.body.clientWidthページの可視領域は高いです.document.body.client Heightページの可視領域は広いです.document.body.offset Widthページの可視領域は高いです.document.body.scrollwidthページの本文の全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowows.screenpです.の幅:window.screen.width画面利用可能ワークエリア高さ:window.screen.availHeight画面利用可能ワークエリア幅:window.screen.avail Width
HTMLの正確な位置付け:scrollLeft、scrollwidth、clientWidth、offset Width
scrollwidth=>取得対象のスクロール幅scrollHeight=>取得対象のローリング高さscrollLeft=>オブジェクトの左端とウィンドウの現在見えるコンテンツの左端との距離(ロールオフされた左)scrollTop=>設定またはオブジェクトの最上端とウィンドウに見えるコンテンツの最上端との距離(ロールオフされた高さ)を取得します.offset Left=>ページまたはoffset Part属性によって指定された親座標に対するオブジェクトの計算左位置offset Top=>ページまたはoffset Top属性によって指定された親座標に対するオブジェクトの計算先端位置offset Height=>取得対象の高さevent=クラスの水平座標
event.client Y=>相対文書の垂直座標
event.offsetX=>相対容器の水平座標
event.offsetY=>相対容器の垂直座標
document.documentElement.scrollTop=>垂直方向にスクロールする値
event.client X+document.documentElement.scrollTop=>相対ドキュメントの水平座標+垂直方向のスクロール量
実現コード:
Dcument.body.clientWidth=>BODYオブジェクト幅
Dcument.body.clientHeight=>BODYオブジェクト高さ
document.documentElement.client Width=>可視領域幅
Dcument.documentElement.clientHeight=>可視領域の高さ
FireFox中:
Dcument.body.clientWidth=>BODYオブジェクト幅
Dcument.body.clientHeight=>BODYオブジェクト高さ
document.documentElement.client Width=>可視領域幅
Dcument.documentElement.clientHeight=>可視領域の高さ
Operaにおいて:
Dcument.body.clientWidth=>可視領域幅
Dcument.body.clientHeight=>可視領域の高さ
document.documentElement.clientWidth=>ページオブジェクト幅
document.documentElement.clientHeight=>ページオブジェクトの高さ(すなわち、BODYオブジェクトの高さにMarginの高さを加える)
W 3 Cの規格が定義されていない場合、IEは:
document.documentElement.client Width=>0
document.documentElement.clientHeight=>0
FireFoxは以下の通りです
document.documentElement.clientWidth=>ページオブジェクト幅
document.documentElement.clientHeight=>ページオブジェクトの高さ(すなわち、BODYオブジェクトの高さにMarginの高さを加える)
Operaは:
document.documentElement.clientWidth=>ページオブジェクト幅
document.documentElement.clientHeight=>ページオブジェクトの高さ(すなわち、BODYオブジェクトの高さにMarginの高さを加える)
ページの可視領域は広いです.Dcument.body.clientWidthページの可視領域は高いです.document.body.client Heightページの可視領域は広いです.document.body.offset Widthページの可視領域は高いです.document.body.scrollwidthページの本文の全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowows.screenpです.の幅:window.screen.width画面利用可能ワークエリア高さ:window.screen.availHeight画面利用可能ワークエリア幅:window.screen.avail Width
HTMLの正確な位置付け:scrollLeft、scrollwidth、clientWidth、offset Width
scrollwidth=>取得対象のスクロール幅scrollHeight=>取得対象のローリング高さscrollLeft=>オブジェクトの左端とウィンドウの現在見えるコンテンツの左端との距離(ロールオフされた左)scrollTop=>設定またはオブジェクトの最上端とウィンドウに見えるコンテンツの最上端との距離(ロールオフされた高さ)を取得します.offset Left=>ページまたはoffset Part属性によって指定された親座標に対するオブジェクトの計算左位置offset Top=>ページまたはoffset Top属性によって指定された親座標に対するオブジェクトの計算先端位置offset Height=>取得対象の高さevent=クラスの水平座標
event.client Y=>相対文書の垂直座標
event.offsetX=>相対容器の水平座標
event.offsetY=>相対容器の垂直座標
document.documentElement.scrollTop=>垂直方向にスクロールする値
event.client X+document.documentElement.scrollTop=>相対ドキュメントの水平座標+垂直方向のスクロール量
実現コード:
////////
function windowHeight() {
var myHeight = 0;
if (typeof(window.innerHeight) == 'number') {
//Non-IE
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientHeight)) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
/////////
function windowWidth() {
var myWidth = 0;
if (typeof(window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
} else if (document.documentElement && (document.documentElement.clientWidth)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if (document.body && (document.body.clientWidth)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
/**** ****/
function scrollY() {
var de = document.documentElement;
return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/**** ****/
function scrollX() {
var de = document.documentElement;
return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
/**** ****/
function pageHeight() {
return document.body.scrollHeight;
}
/**** ****/
function pageWidth() {
return document.body.scrollWidth;
}