JavaScriptのinnerWidthとinnerHeightの詳しい説明-jsチュートリアル-php.cn

JavaScriptのinnerWidthとinnerHeightの詳しい説明

黄舟

リリース： 2017-10-12 10:50:46

オリジナル

1736 人が閲覧しました

以下のエディタでは、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 サイトの他の関連記事を参照してください。