首頁  >  文章  >  web前端  >  JavaScript中取得視窗的屬性(視窗高度、元素尺寸、元素位置)

JavaScript中取得視窗的屬性(視窗高度、元素尺寸、元素位置)

php是最好的语言
php是最好的语言原創
2018-08-03 09:57:135172瀏覽

取得視窗屬性

  • 查看捲軸的滾動距離

    • ##相容性比較混亂,同時取兩個值相加,因為不可能存在兩個同時有值

    • IE8及IE8以下不相容

    • window.pageXOffset/pageYOffset


    • document.body/documentElement.scrollLeft/scrollTop


    • #封裝相容性方法,求滾動輪滾動離getScrollOffset()

為了解決相容性的問題,我們來封裝一個函數:

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) {            x : window.pageXoffset,            y : window.pageYoffset
        }
        else{
            return {                x : document.body.scrollLeft + document.documentElement.scrollLeft,                y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>

  • #查看視口的尺寸


    • 適用於怪異模式(向後相容)下的瀏覽器

    • #標準模式下,任意瀏覽器都相容

    • IE及IE8以下不相容

    • window.innerWidth/innerHeight


    • document.documentElement.clientWidth/clientHeight


    • ##document.body.clientWidth/clientHeight

    • #document.body.clientWidth/clientHeight

#document.body.clientWidth/clientHeight

  • #封裝相容性方法,傳回瀏覽器視窗尺寸getViewportOffset()
    • #為了解決相容性的問題,我們來封裝一個函數:
    • <script type="text/javascript">    function getSViewportOffset() {        if(window.innerWidth) {            return {
                      w : window.innerWidth,
                      h : window.innerHeight
                  }
              }else{            if(document.compatMode ==="BackCompat") {                return {
                          w : document.body.clienWidth,
                          h : document.body.clientHeight
                      }
                  }else{                return {
                          w : document.documentElement.clientWidth,
                          h : document.documrntElement.clientHeight
                      }
                  }
          }
      </script>
    • 檢視元素的幾何尺寸
    • domEle.getBoundingClientRect();
    • 相容性很好
    • 該方法返回一個對象,物件裡面有left,top,right,bottom等屬性。 left和top代表該元素左上角的X和Y座標,right和bottom代表元素右下角的X和Y座標。
  • height和width屬性老版本IE不顯示(人為解決:分別相減一下就能得出)
    • 返回的結果並不是」即時的”


    • 讓滾動條捲動

    • window上有三個方法
    • scroll(x,y)在x軸、y軸上滾動的位置,scrollTo(x,y)
    • 讓捲軸滾動到當前位置,而不是累加距離(這兩種方法是完全一樣的)
    • scrollBy();累加滾動距離
    • 三個方法功能類似,用法都是將x,y座標傳入。即實現讓捲軸滾動到目前位置。
    • 差異:scrollBy()會在先前的資料基礎之上做累加。


eg:利用scroll()頁面定位功能。

  • eg:利用scrollBy()快速閱讀功能。

    • 練習:

      做一個小閱讀器,會自動翻頁。

      <!DOCTYPE html><html><head>
          <title>Document</title></head><body>文本内容    <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p>
          <p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript">
          var start = document.getElement.getElementsByTagName(&#39;p&#39;)[0];    var stop = document.getElement.getElementsByTagName(&#39;p&#39;)[1];    var timer = 0;    var key = true;   //加锁,防止连续点start产生累加加速
          start.onclick = function() {
              if(key) {
                  timer = setInterval(function() {
                      window.scollBy(0,10);
                  },100);
                  key = false;
              }
          }
          stop.onclick = function() {
              clearInterval(timer);
              key = true;
          }</script>
  • 查看元素的尺寸(視覺上的)


    • #dom.offsetWidth,dom.offsetHeight

    • #查看元素的位置

    • #dom.offsetLeft,dom.offsetTop
    • 對於無定位父級的元素,傳回相對文檔的座標。對於有定位的父級元素,傳回相對於最近的有定位的父級的座標。
    • dom.offsetParent

    傳回最近的有定位的父級,如無,傳回body,body.offsetParent回傳null

    #eg:求元素相對於文件的座標getElementPosition

    #相關文章:

    ##js取得瀏覽器高度 視窗高度元素尺寸偏移屬性的方法

Javascript實作取得視窗的大小與位置程式碼分享########相關影片:########## JavaScript陣列物件屬性length與二維陣列##########

以上是JavaScript中取得視窗的屬性(視窗高度、元素尺寸、元素位置)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn