ホームページ  >  記事  >  ウェブフロントエンド  >  js/jquery は、ブラウザ ウィンドウの表示領域の高さと幅、およびスクロール バーの高さの実装コードを取得します。

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

高洛峰
高洛峰オリジナル
2017-01-11 09:39:251637ブラウズ

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

document.body.offsetWidth 
document.body.offsetHeight

DOCTYPE を宣言するブラウザでは、次のコードを使用してブラウザの表示ウィンドウ サイズを取得できます: 次のコードをコピー

document.documentElement.clientWidth 
document.documentElement.clientHeight

IE、FF と Safari は両方ともこのメソッドをサポートしていますが、Opera はこの属性をサポートしていますが、IE を除くすべてのブラウザはこの情報を window オブジェクトに保存します。この情報は次のコードを使用して取得できます。以下のコードをコピーします

window.innerWidth 
window.innerHeight

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

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 { 
width : document.documentElement.offsetWidth, 
height: document.documentElement.offsetHeight 
} 
}else{ 
return { 
width : document.documentElement.clientWidth + getScrollWith(), 
height: document.documentElement.clientHeight + getScrollWith() 
} 
} 
}

IE、FireFox の違いは次のとおりです:

IE6.0、FF1.06 +:

clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border 
IE5.0/5.5: 
clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height

Attached は、ページ全体の幅と高さを取得するために最も一般的に使用されるメソッドです (jquery フレームワークが必要です)。次のコードをコピーします

$(document).width() < $(&#39;body&#39;).width() ? $(document).width() : $(&#39;body&#39;).width(); 
$(document).height() < $(&#39;body&#39;).height() ? $(document).height() : $(&#39;body&#39;).height();

alert($(window).height()); //現在表示されているブラウザウィンドウの高さ

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

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

More js/jquery ブラウザウィンドウの表示領域の高さと幅、スクロールバーの高さを取得します 実装コードに関する記事はこちらPHP 中国語 Web サイトに注意してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。