元素大小與獲取各類高度 寬度 距離總結

前言

項目開發中常常須要用到元素大小，網頁高度，視口高度，各類距離等等，本文總結了獲取各類寬高、距離的方法。

元素大小

祭出這幾張神圖，簡單明瞭又清晰😄

各類方法總結

注意：這些方法都不考慮混雜模式，請確保你的文檔在標準模式下（填寫了正確的doctype）不然獲取的值會不許。

1. 獲取整個網頁高度與寬度

代碼說明

1. 火狐不兼容document.body，因此使用document.documentElement

2. 理論上沒有滾動條時scrollHeight和clientHeight相同，事實上各類瀏覽器有不一樣的處理，因此最保險的方法是取這倆中最大者。

function getPagearea(){
  return {
      width: Math.max(document.documentElement.scrollWidth,
             document.documentElement.clientWidth),
      height: Math.max(document.documentElement.scrollHeight,
              document.documentElement.clientHeight)
  }
}複製代碼

PS：jq的話  $(document).height();          $(document).width();

2. 獲取視口高度與寬度

代碼說明

1. 同上，火狐不兼容document.body，因此使用document.documentElement

function getViewport() {
　　 return {
　　  　width: document.documentElement.clientWidth,
　　  　height: document.documentElement.clientHeight
　　 }
}複製代碼

PS：jq的話 $(window).height();           $(window).width();

3. 獲取元素距頁面高度

function getElementTop(el) {
　let actualTop = el.offsetTop;
　let current = el.offsetParent;
　
  while (current !== null) {
　　　actualTop += current.offsetTop;
　　　current = current.offsetParent;
　}
　return actualTop;
}複製代碼

PS：jq的話 jq對象.offset().top          jq對象.offset().left

4. 獲取元素到視口的距離

使用 el.getBoundingClientRect 方法 

getBoundingClientRect方法返回元素的大小及其相對於視口的位置。  

5. 獲取縱向滾動條高度或橫向滾動條長度

代碼說明

同1，火狐不兼容document.body，因此使用document.documentElement

function getScrollTop() {
     let doc = document;
     return Math.max(doc.body.scrollTop, doc.documentElement.scrollTop)
};

function getScrollLeft() {
     let doc = document;
     return Math.max(doc.body.scrollLeft, doc.documentElement.scrollLeft)
};複製代碼

6. 獲取鼠標到元素、視口、文檔、屏幕距離

這種主要是讀取event對象中的值，具體看下圖比較清晰。

一個使用例子

上下滾動時判斷元素在視口中出現

這個例子使用到了上面的方法

document.onscroll = () => {
    let dom = document.getElementById('box');
    let top = getElementTop(dom); // 元素距頁面高度
    let scrollTop = getScrollTop(); // 獲取滾動條高度
    let viewPortHeight = getViewport().height; // 獲取視口寬高

    if (top > scrollTop && top <= scrollTop + viewPortHeight) {
         console.log('元素出現')
    }
}

// 寫法2：配合getBoundingClientRect判斷
document.onscroll = () => {
  let dom = document.getElementById('box2');
  let rectTop = dom.getBoundingClientRect().top;
  let viewPortHeight = getViewport().height; 
 
  if (rectTop > 0 && rectTop < viewPortHeight) {
      console.log('元素出現')
  }
}

// 用jq的話
document.onscroll = () => {
  let $dom = $('#box');
  let top = $dom.offset().top;
  let scrollTop = $(window).scrollTop();
  let viewPortHeight = $(window).height();
  
  if (top > scrollTop && top <= scrollTop + viewPort.height) {
      console.log('元素出現')
  }
}
複製代碼