瀏覽器窗口大小-網頁大小-元素位置

james 發布于2019-08-22 16:11 / 1135人閱讀

摘要：部分摘錄自阮一峰老師博客瀏覽器窗口大小視窗一張網頁的全部面積，就是它的大小。是包括右邊滾動條的寬度的網頁大小如果網頁內容能夠在瀏覽器窗口中全部顯示，不出現滾動條，那么網頁的和應該相等。

部分摘錄自阮一峰老師博客:

瀏覽器窗口大小(視窗)

一張網頁的全部面積，就是它的大小。通常情況下，網頁的大小由內容和CSS樣式表決定。
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網頁面積，又叫做viewport（視口）。

注意事項

必須在頁面加載完成后才能運行，否則document對象還沒生成，瀏覽器會報錯

clientWidth和clientHeight都是只讀屬性，不能對它們賦值。

window.innerWidth是包括右邊滾動條的寬度的

    const getViewport = () =>{
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

網頁大小

如果網頁內容能夠在瀏覽器窗口中全部顯示，不出現滾動條，那么網頁的clientWidth和scrollWidth應該相等。但是實際上，不同瀏覽器有不同的處理，這兩個值未必相等。所以，我們需要取它們之中較大的那個值

    const getPageArea = () =>{
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
         }
    }

網頁元素絕對位置

指該元素的左上角相對于整張網頁左上角的坐標。這個絕對位置要通過計算才能得到。

不斷累加offsetParent的offsetTop和offsetLeft屬性

由于在表格和iframe中，offsetParent對象未必等于父容器，所以上面的函數對于表格和iframe中的元素不適用。

   function getElementLeft(element){
       var actualLeft = element.offsetLeft;
       var current = element.offsetParent;
   
       while (current !== null){
           actualLeft += current.offsetLeft;
           current = current.offsetParent;
       }
       return actualLeft;
   }
   function getElementTop(element){
       var actualTop = element.offsetTop;
       var current = element.offsetParent;
   
       while (current !== null){
           actualTop += current.offsetTop;
           current = current.offsetParent;
       }
       return actualTop;
   }

利用getBoundingClientRect方法

此方法其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對于瀏覽器窗口（viewport）左上角的距離.(其實也就是網頁元素的相對位置)

   　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
   
   　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

網頁元素相對位置

網頁元素的相對位置，指該元素左上角相對于瀏覽器窗口左上角的坐標。

有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標減去頁面的滾動條滾動的距離就可以了也就是減去document.documentElement.scrollLeft|scrollTop

    //快捷方法
    var X= this.getBoundingClientRect().left;
    
　　 var Y =this.getBoundingClientRect().top;

滾動位置

返回當前頁面的滾動位置。請使用pageXOffset和pageYOffset，如果已定義，否則使用scrollLeft和scrollTop。你可以省略el來使用窗口的默認值。pageXOffset是scrollY的別名(event.pageX是鼠標活動事件的屬性)

    const getScrollPosition = (el = window) =>{
        return ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
    }
      
    // getScrollPosition() -> {x: 0, y: 200}

返回頁面頂部

    const scrollToTop = () =>{
        const distance = document.documentElement.scrollTop
        if(distance > 0){
            window.requestAnimationFrame(scrollToTop)
            window.scrollTo(0, distance - distance/8)
        }
    }

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

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

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

網頁與瀏覽器窗口の真理

摘要：參考資料首先，網頁大小與瀏覽器窗口大小從來都不是一回事這尼瑪最近才明白，坑所以，要知道以下常網頁的范圍我們在代碼里面設置的或者腳本，改變的樣式就是網頁范圍下的改變，也就是說，我們設置的大小是網頁的不是瀏覽器窗口的大小。參考資料首先，網頁大小與瀏覽器窗口大小從來都不是一回事！！！這尼瑪最近才明白，坑~ 所以，要知道以下常: 網頁的范圍我們在代碼里面設置的CSS或者js腳本，改變的樣式...

tinysun1234 2019-08-30 12:44 評論0 收藏0
瀏覽器的各種位置值獲取

摘要：包括和屬性是可以賦值的，并且會立即自動滾動網頁到相應位置，因此可以利用它們改變網頁元素的相對位置。另外，方法也有類似作用，可以使網頁元素出現在瀏覽器窗口的左上角。網頁元素的位置那就是使用方法。就是透過瀏覽器看內容的這個區域高度。獲取網頁的大小一張網頁的全部面積，就是它的大小，通常是由內容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網頁面積。又叫做viewport...

lvzishen 2019-08-21 11:53 評論0 收藏0
CSS布局模型

摘要：在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。內聯元素可不像塊狀元素這么霸道獨占一行浮動模型塊狀元素這么霸道都是獨占一行，如果現在我們想讓兩個塊狀元素并排顯示，怎么辦呢不要著急，設置元素浮動就可以實現這一愿望。1、流動模型（Flow）　　　　流動（Flow）是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。　　　　流...

weakish 2019-04-23 11:58 評論0 收藏0
Web網頁布局的主要方式

摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。一、靜態布局（static layout）　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

blastz 2019-08-30 13:50 評論0 收藏0
Web網頁布局的主要方式

摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。一、靜態布局（static layout）　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

shiina 2019-08-01 17:52 評論0 收藏0