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

Martin91 發布于2019-08-19 18:05 / 930人閱讀

摘要：在中上面的兩組屬性相同，都表示視口的大小，而不是瀏覽器窗口的大小。但在其他瀏覽器中，后面的這兩個屬性表示的是整個頁面布局視口，也就是頁面選然后的實際大小。元素在水平方向桑占用的空間的大小。

1、窗口位置

窗口對象對應的是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對象中使用，不適用于框架

2、窗口大小

 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);

3、元素大小

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

3.1偏移量

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

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

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

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

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

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

。

通過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高級程序設計

GPU云服務器云服務器窗口大小元素大小 java修改窗口大小 asp控制窗口的大小

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79183.html

曲鳥全棧UI自動化教學(四)：Selenium工作原理及Webdriver對瀏覽器的配置和操作

摘要：一前言上篇文章我們學習了頁面操作原理及如何高效的進行元素定位那的工作原理又是什么是如何驅動瀏覽器的呢這篇文章為你講解工作原理及對瀏覽器的配置和操作。基于該運行瀏覽器所產生的緩存等數據都會被記錄。 ...

libin19890520 2021-10-13 09:40 評論0 收藏0
JS中的位置與大小

摘要：客戶區大小元素的客戶區大小指的是元素內容機器內邊距占據空間的大小。滾動大小和主要用于確定元素內容的實際大小。窗口大小在現代主流瀏覽器中提供了四個屬性確定窗口的大小，分別為和。原文鏈接：http://mrzhang123.github.io/2016/08/03/js-position/ 最近事兒比較多，一直沒時間寫東西，前幾天又遇到關于獲取元素大小的問題，每次遇到這類問題就翻書，比較...

Developer 2019-08-19 18:48 評論0 收藏0
JavaScript是如何工作的:渲染引擎和優化其性能的技巧

摘要：渲染樹的布局創建渲染器并將其添加到樹中時，它沒有位置和大小，計算這些值稱為布局。根渲染器的位置為，其尺寸與瀏覽器窗口的可見部分即的大小相同。渲染器使其在屏幕上的矩形無效，這會導致操作系統將其視為需要重新繪制并生成繪事件的區域。這是專門探索 JavaScript 及其所構建的組件的系列文章的第11篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前...

big_cat 2019-08-23 14:40 評論0 收藏0
前端面試題總結

摘要：還有天，年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結，這篇關于面試的文章，我也會不定時的更新。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。還有7天，2018年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結，這篇關于面試的文章，我也會不定時的更新。 HTML 1.說一下你對HTML語義...

ztyzz 2019-08-30 15:55 評論0 收藏0
前端面試題總結

摘要：還有天，年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結，這篇關于面試的文章，我也會不定時的更新。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。還有7天，2018年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結，這篇關于面試的文章，我也會不定時的更新。 HTML 1.說一下你對HTML語義...

tinysun1234 2019-08-02 13:57 評論0 收藏0