Javascript实现获取窗口的大小和位置代码分享_javascript技巧-js教程-PHP中文网

Javascript实现获取窗口的大小和位置代码分享_javascript技巧

php中文网

发布： 2016-05-16 16:29:11

原创

1700人浏览过

在javascript中可以使用outerwidth，outerheight 获取浏览器的大小.用 innerwidth,innerheight 来获取窗口的大小（除去浏览器边框部分）。对于ie6 及之前版本，要区分是标准模式，还是混杂模式。标准模式使用document.documentelement.clientwidth，document.documentelement.clientheight；混杂模式使用document.body 的clientwidth，clientheight。

复制代码代码如下:

     (function () {

         var pageWidth = window.innerWidth;

         var pageHeight = window.innerHeight;

         var broswerWidth = window.outerWidth;

         var broswerHeight = window.outerHeight;

         alert(pageWidth + " " + pageHeight);

         alert(broswerWidth + " " + broswerHeight);

         if (typeof pageWidth != "number") {

             if (document.compatMode == "CSS1Compat") {  //The standard mode

                 pageWidth = document.documentElement.clientWidth;

                 pageHeight = document.documentElement.clientHeight;

             } else {

                 pageWidth = document.body.clientWidth;

                 pageHeight = document.body.clientHeight;

             }

         }  

     })();

获取窗口的位置：IE，chrome，Safari，使用screenLeft，screenTop 来获取窗口距离屏幕左边和屏幕上边的位置。而Firefox不支持此属性，Firefox使用screenXP，screenY 达到同样的效果。

Musho

AI网页设计Figma插件

查看详情

复制代码代码如下:

    (function btnFun() {

        var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :

            window.screenX;

        var topPos = (typeof window.screenTop == "number") ? window.screenTop :

                         window.screenY;

        alert(leftPos + " " + topPos);

        //alert(window.screenLeft+" "+window.screenTop);

    })();