js操做瀏覽器窗口及元素大小

一、窗口位置

窗口對象對應的是window對象。在window對象中使用屬性screenTop、screenLeft、screenY和screenX（單位爲像素）兩組屬性來表示窗口相對於屏幕上邊和左邊的位置。但在各個瀏覽器中，對着兩組屬性的支持有所不一樣，其中ScreenTop和ScrennLeft屬性IE，Safari、Opera和Chrome中用來表示窗口位置屬性，而screenX和screenY是FIrefox、Safari和Chrome中用來表示窗口位置的屬性。也就說，Safari和Chrome同時支持這兩種屬性。另外，在Opera中也支持screenX和screenY屬性，但與screenTop和screenLeft並不對應，所以，在Opera中不該該使用這兩個屬性。獲取跨瀏覽器窗口位置的代碼應該以下：

var leftPos = (typeof window.screenLeft === "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop === "number") ? window.screenTop : window.screenY;

​須要注意的是，在IE和Opera中screenLeft和ScreenTop中保存的是從屏幕左上角到window對象表示的頁面的可見區域的距離，並且若是window對象表示的是頁面中的框架時，則返回該框架相對於屏幕左上角的距離。而在Firefox、Safari和Chrome中，screenX和screenY兩個屬性，則不論window對象表明的是不是框架，始終返回最外層的window對象相對於左上角的距離，也就是top.screenX和screenY。所以，不可能精準的跨瀏覽器獲取窗口的位置。

雖然不能精準的獲取窗口的位置，但卻可使用moveTo( )和moveBy( )兩個方法，將窗口精確的移動到一個新位置。moveTo( )接受兩個參數，表明新位置的座標，moveBy( )方法也接受兩個參數，表示在水平和垂直方向上移動的像素數。例如：

/*將窗口移動到(150,360)*/
window.moveTo(150,360);

/*將窗口向下移動100px*/
window.moveBy(0,100);

另外，須要注意的是：

（1）這兩個方法可能會被瀏覽器禁用，在IE7及更高版本和Opera中默認就是禁用的。
（2）這兩個方法只能在最外層window對象中使用，不適用於框架

二、窗口大小

IE9+和其餘主流瀏覽器都提供了下面的四個屬性來表示瀏覽器窗口的尺寸：

 innerWidth：表示該容器中頁面視圖區的寬度（減去邊框）

 innerHeight：表示該容器中頁面視圖區的高度（減去邊框）

 outerWidth：表示瀏覽器窗口自身的寬度（在框架中也適用）

 outerHeight：表示瀏覽器窗口自身的高度（在框架中也適用）

在Opera中outerWidth和outerHeight兩個屬性，表示的單個標籤頁對應的瀏覽器窗口的大小。在Chrome中上面的兩組屬性相同，都表示視口的大小，而不是瀏覽器窗口的大小。

在IE8及更早的瀏覽器中，沒有提供獲取瀏覽器窗口的尺寸的屬性。但它經過DOM提供了頁面可見區域的相關信息，而且這些信息，在其餘瀏覽器中均可以使用。document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了頁面視口的寬度和高度。而在IE6的混雜模式下，則須要經過document.body中的相應屬性去獲取。

在跨瀏覽器的狀況下，雖然不能獲取窗口的大小，但能夠獲取視口的大小，在不考慮IE6混雜模式的狀況下，可使用下面的代碼：

var viewWidth = (typeof window.innerWidth === "number") ? window.innerWidth : document.documentElement.clientWidth;
var viewHeight = (typeof window.innerHeight === "number") ? window.innerHeight : document.documentElement.clientHeight;

對於移動設備，window.innerHeight 和 window.innerWidth 保存和可見視口，而移動IE不支持這兩個屬性，但在document.documentElement.clientHeight 和 document.documentElementWidth 中保存這一樣的屬性。但在其餘瀏覽器中，後面的這兩個屬性表示的是整個頁面佈局視口，也就是頁面選而後的實際大小。而IE把後面的這兩屬性，保存在document.body.clientWidth和document.documentElemtn.clientHeight中。

使用 resizeTo( ) 和 resizeBy( )兩個方法能夠調整窗口的大小，resizeTo( )方法接收兩個參數，新的寬度和高度; resizeBy( )方法也接收兩個參數，新窗口和元窗口的寬度和高度差。例如：

/*將窗口調整到300*300*/
window.resizeTo(300,300);
/*將窗口擴大的100*50*/
window.resizeBy(100,50);

三、元素大小

獲取或設置元素大小的屬性和方法，不屬於DOM的規範，但各個瀏覽器都已經支持。

3.1偏移量

經過下面的4個屬性（都以像素計）能夠或得元素的偏移量：

offsetHeight：元素在垂直方向上佔用的空間大小。包括元素的上下邊框和滾動條（若是有），但不包括外邊距。

offsetWidht：元素在水平方向桑佔用的空間的大小。同上。

offsetLeft：元素的左外邊框到包含元素的左內邊框的距離

offsetTop：元素的上外邊框到包含元素的上內邊框的距離

另外，還有一個offsetParent 屬性，指向包含該元素的引用。offsetParent屬性與ParentNode屬性不必定相等，例如，<td>元素的offsetParent屬性指向的就是他的祖先元素<table>。

經過offsetTop、offsetLeft和offsetParent屬性，經過不斷的向上循環疊加，能夠基本準確的獲取元素的偏移量，例如：

/*獲取元素的偏移量*/
    function getElementLeft(elem){
        var actualLeft = elem.offsetLeft,
            current = elem.offsetParent;
        while(current != null){
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }

    function getElementTop(elem){
        var actualTop = elem.offsetTop,
            current = elem.offsetParent;
        while(current != null){
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    }

上面的兩個函數，經過不斷的疊加offsetLeft 和 offsetTop 值，獲取相對精確（不包括全部的的邊框的寬度）的元素相對於頁面的偏移量。

注：這4個屬性是隻讀的

​

3.2 客戶區大小

元素的客戶區大小指的是元素的內容，及其內邊距佔據的空間的大小。使用下面的兩個屬性表示：

clientWidth：元素內容區域加左右內邊距的寬度

clientHeight：元素內容區域加上下內邊距的寬度

注：這兩個屬性是隻讀的

3.3 滾動大小

滾動大小指的是包含滾動內容的元素的大小。使用下面的4個屬性表示：

scrollWidth：在沒有滾動條時，表示內容元素的高度，和width屬性相同；在有滾動條時，包含滾動條和隱藏部分的總高度。

scrollHeight：在沒有滾動條時，表示內容元素的寬度，和height屬性相同；在有滾動條時，包含滾動條和隱藏部分的總寬度。

scrollLeft：被隱藏在內容區左側的像素數。經過設置這個屬性，能夠改變元素的滾動位置。

scrollHeight：被隱藏在內容區上方的像素數。經過設置這個屬性，能夠改變元素的滾動位置。

scrollWidth 和 scrollHeight 屬性主要用來肯定元素內容的實際大小。例如，帶有滾動條的頁面的高度是 documen.documentElement.scrollHeight。但對於不包含滾動條的頁面，在各個瀏覽器中 scrollHeight 和 scrollWidth 與 clientWidth 和 clientHeight 表示的寬高有交錯，爲了準確的獲取文檔的總高度，應該使用這兩組屬性較大的一個。例如，下面的代碼：

/*獲取文檔的高度*/
var docHeight = Math.max(document.documentElement.scrollHeight,
                        document.documentElement.clientHeight);
    /*獲取文檔的寬度*/
var docWidth = Math.max(document.documentElement.scrollWidth,
                        document.documentElement.clientWidth);

scrollLeft和scrollTop屬性既能夠肯定當前元素的滾動狀態，也能夠用來設置元素的滾動位置。例如，當元素不是頂部時，設置它滾動到頂部：

/*設置元素返回頂部*/
function scrollToTop(elem){
    if(elem.scrollTop != 0){
        elem.scrollTop = 0;
    }
}

3.4 肯定元素的大小

瀏覽器爲每一個元素提供了一個getBoundingClientRect( )方法，這個方法返回一個矩形對象，包含：left，top，right 和 bottom 屬性，這些屬性給出了元素相對於瀏覽器中的視口的位置。但在IE8及之前的瀏覽器中認爲文檔的坐上角的座標是（2，2），而IE9+和其餘瀏覽器則認爲是（0，0）。所以，在使用的時候，須要首先檢測文檔左上角的左邊。另外，在一些瀏覽中不支持getBoundingClientRect( )方法，這是可使用元素的offsetLeft、offsetHeight屬性，以及文檔的scrollLeft和scrollTop屬性來獲取元素相對於視口的top、left、bottom和right屬性。綜上，可使用下面的函數來實現跨瀏覽器獲取元素的 rect 對象：

function getBoundingClientRect(elem){
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft
        if(elem.getBoundingClientRect){
            if(typeof arguments.callee.offset != "number"){
                var temp = document.createElement("div");
                temp.style.cssText = "positon:absolute;left:0;top:0;";
                document.body.appendChild(temp);
                arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
                document.body.removeChild(temp);
                temp = null;
            }
            var rect = elem.getBoundingClientRect();
            var offset = arguments.callee.offset;
            return {
                left : rect.left + offset,
                right : rect.right + offset,
                top : rect.top + offset,
                bottom : rect.bottom + offset
            }
        }else{
            var actualLeft = getElementLeft(elem);
            var actualTop = getElementTop(elem);
            return {
                left : actualLeft - scrollLeft,
                right : actualLeft + elem.offsetWidth - scrollLeft,
                top : actualTop - scrollTop,
                bottom : actualTop + elem.offsetHeight - scrollTop

            }
        }

    }

參考資料：javaScript高級程序設計