ホームページ > 記事 > ウェブフロントエンド > JavaScriptのinnerWidthとinnerHeightの詳しい説明
JavaScriptのinnerWidthとinnerHeightの詳しい説明
- 黄舟オリジナル
- 2017-10-12 10:50:461708ブラウズ
以下のエディタでは、JavaScript の innerWidth と innerHeight について簡単に説明します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして一緒に見てみましょう
innerWidth プロパティと innerHeight プロパティ
説明: window オブジェクトの読み取り専用プロパティは、ウィンドウのドキュメント表示領域の高さと幅を宣言します。ピクセル(px)。 (注: ここでの幅と高さには、メニュー バー、ツールバー、スクロール バーなどの高さは含まれません)
以下では、これら 2 つのプロパティを確認します:
画面解像度: 1920x1080 ブラウザ: QQブラウザ (カーネルは Chrome) のコードは次のとおりです:
var width=window.innerWidth,height=window.innerHeight; // ウィンドウの高さと幅を受け取るために幅と高さをそれぞれ定義します
alert(width) ; // ウィンドウの幅 1920px
alert(height); // ブラウザの両側に障害物がないため、ウィンドウの高さは 950px
innerWidth です。ブラウザにはツールバーがあり、表示画面はタスクバーがあるので130pxで押し出しました
今回ブロガーはタスクバー(実際には非表示)とツールバーのタブを削除し、F12を押して開発者を追加しました再度テストするオプション:
/*————————干掉任务栏后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //宽度没有变化,还是1920px alert(height); //而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度 /*————————又干掉标签页后，并加上开发者选项后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px alert(height); //而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px
結論: innerHeight と innerWidth は、表示ウィンドウのピクセルを計算するだけであることを説明します。メニュー バー、ツールバー、その他の外部要因がない場合は、それを縮小するために自動的に拡張されます。がある場合は、表示ウィンドウのみが押されます 外部要因をテストした後、内部要因のスクロール バーをテストしましょう
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试innerHeight属性</title>
</head>
<body>
<p style="width:500px;height:1300px;background-color:red;"></p>
<script>
window.onload=function(){
/*————————p超出长度,带着滚动条后————————*/
var width=window.innerWidth,height=window.innerHeight;
alert(width); //窗口的宽度 1920px
alert(height); //窗口的高度 950px
}
</script>
</body>
</html>結論: 内部スクロール バーには何もないことを意味します。 innerWidth に影響します。たとえ存在しても、幅には影響しません。1920px
最終結論: innerHeight と innerWidth は、フォームの高さと幅を取得します (ブラウザー開発者)。内部要因 (スクロール バー) は影響しますが、影響はありません 最も欠陥のある IE について話しましょう。IE の互換性の問題については、次のように解決できます
。リーリー
以上がJavaScriptのinnerWidthとinnerHeightの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。