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

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

May 16, 2016 pm 05:46 PM
スクロール・バー

ブラウザウィンドウの表示領域の高さと幅を取得します。スクロールバーの高さを必要とする友人はそれを参照できます。
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()); //スクロールバーの縦の幅を取得します左の方です
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Microsoft、Windows 11のFluentスクロールバーをGoogle Chromeに導入 Microsoft、Windows 11のFluentスクロールバーをGoogle Chromeに導入 Apr 14, 2023 am 10:52 AM

Microsoft、Windows 11のFluentスクロールバーをGoogle Chromeに導入

Reactでスクロールバーのスクロールを非表示にする方法 Reactでスクロールバーのスクロールを非表示にする方法 Dec 21, 2022 pm 03:38 PM

Reactでスクロールバーのスクロールを非表示にする方法

Mac システムでスクロール バーを常に表示するように設定する方法 - スクロール バーを常に表示するように設定する方法 Mac システムでスクロール バーを常に表示するように設定する方法 - スクロール バーを常に表示するように設定する方法 Mar 18, 2024 pm 06:22 PM

Mac システムでスクロール バーを常に表示するように設定する方法 - スクロール バーを常に表示するように設定する方法

HTML スクロール バー テキスト ボックスをコーディングする方法 HTML スクロール バー テキスト ボックスをコーディングする方法 Feb 19, 2024 pm 07:38 PM

HTML スクロール バー テキスト ボックスをコーディングする方法

HTMLスクロールバーの作り方 HTMLスクロールバーの作り方 Feb 22, 2024 pm 03:24 PM

HTMLスクロールバーの作り方

Chrome に Windows 11 スタイルのオーバーラップ スクロールバーが登場 Chrome に Windows 11 スタイルのオーバーラップ スクロールバーが登場 Apr 23, 2023 pm 06:40 PM

Chrome に Windows 11 スタイルのオーバーラップ スクロールバーが登場

HTMLスクロールバーのスタイルを設定する方法 HTMLスクロールバーのスタイルを設定する方法 Oct 11, 2023 am 10:08 AM

HTMLスクロールバーのスタイルを設定する方法

Windows 11 で常に表示されるスクロール バーを有効または無効にするにはどうすればよいですか? Windows 11 で常に表示されるスクロール バーを有効または無効にするにはどうすればよいですか? Apr 24, 2023 pm 05:58 PM

Windows 11 で常に表示されるスクロール バーを有効または無効にするにはどうすればよいですか?

See all articles