js/jqueryはブラウザウィンドウの表示領域の高さと幅、およびスクロールバーの実装の高さを取得します code_jquery

ブラウザウィンドウの表示領域の高さと幅を取得します。スクロールバーの高さを必要とする友人はそれを参照できます。
IE では、ブラウザの表示ウィンドウ サイズは次の方法でのみ取得できます。 コードは次のとおりです。

コードをコピー コードは次のとおりです。

document.body.offsetWidth
document.body.offsetHeight

DOCTYPE を宣言するブラウザでは、次のことができます。ブラウザの表示ウィンドウ サイズを取得するには、次のコードを使用します。 コードは次のとおりです。 コードをコピーします。

コードをコピーします。 コードは次のとおりです。

document.documentElement.clientWidth
document.documentElement.clientHeight

IE、FF、Safari はすべてこのメソッドをサポートしていますが、opera はこの属性をサポートしています。ページ サイズを返します。
同時に、IE を除くすべてのブラウザ この情報は window オブジェクトに保存され、次のコードを使用して取得できます。 コードをコピー

コードをコピーします コードは次のとおりです:

window.innerWidth
window.innerHeight

一般的な取得方法ウェブページ全体のサイズは次のとおりです コードをコピーします

コードをコピー コードは次のとおりです:

document.body.scrollWidth
document.body.scrollHeight

画面解像度の高さを取得する方法は以下の通りです コードは以下の通りです。 >

コードをコピーします コードは次のとおりです: window.screen.height

window.screen.width

例を要約すると

コードをコピーします コードは次のとおりです: function getViewSizeWithoutScrollbar(){//スクロール バーは含まれません

return {

width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//スクロール バーが含まれます
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
幅 : document.documentElement.offsetWidth,
高さ : document.documentElement.offsetHeight
}
}else{
return {
width : document.documentElement.clientWidth getScrollWith(),
height: document.documentElement.clientHeight getScrollWith()
}
}
}


IE と FireFox の違いは次のとおりです。
IE6.0、FF1.06:

コードをコピー コードは次のとおりです。 clientWidth = 幅のパディング

clientHeight = 高さのパディング

offsetWidth = 幅のパディング境界線
offsetHeight = 高さのパディング境界線
IE5 .0/5.5 :
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height


Attached は、ページ全体の幅と高さを取得する方法（jqueryフレームワークが必要） コードは次のとおりです。

コードをコピーします。 コードは次のとおりです: $( document).width() < $('body').width() ? : $(' body').width();

$(document).height() < $('body').height() : $('body').height( );

alert($(window).height()); //ブラウザの現在のウィンドウの表示領域の高さ
alert($(document).height());ブラウザの現在のウィンドウドキュメント
alert($(document.body).height());//ブラウザの現在のウィンドウ内のドキュメント本文の高さ
alert($(document.body).outerHeight (true));//ブラウザの現在のウィンドウの高さ ドキュメント本文の合計の高さには、境界線の余白が含まれます
alert($(window).width()) //表示されているブラウザの現在のウィンドウの幅area
alert($(document).width());/ /ブラウザの現在のウィンドウドキュメントの幅
alert($(document.body).width());//高さブラウザの現在のウィンドウ ドキュメントの本文
alert($(document.body).outerWidth( true)) //ブラウザの現在のウィンドウ ドキュメント本文の合計幅には、境界線のパディング マージンが含まれます

alert($(document).scrollTop()); //スクロールバーの上部までの縦の高さを取得します
alert($(document).scrollLeft()); //スクロールバーの縦の幅を取得します左の方です