Javascript之經常使用尺寸獲取

標籤： js

---

緣起##

平時在開發中或多或少須要去獲取元素尺寸，特此記錄經常使用的尺寸獲取方案。

經常使用相關尺寸##

• 窗口可視尺寸 測試地址

/**
 * 獲取窗口可視尺寸
 */
function getWindowClientSize(){
    var docElem = document.documentElement;
    var docBd = document.body;
    return {
      w: docElem.clientWidth || docBd.clientWidth,
      h: docElem.clientHeight || docBd.clientHeight
    }
}

• 窗口真實尺寸 測試地址

/**
 * 獲取窗口真實尺寸，包括滾動條隱藏的內容
 */
function getWindowSize() {
  var docElem = document.documentElement;
  var docBd = document.body;
  return {
    w: docElem.scrollWidth || docBd.scrollWidth,
    h: docElem.scrollHeight || docBd.scrollHeight
  }
}

• 元素的可視尺寸 測試地址

/**
 * 獲取元素的可視尺寸
 * @param {Dom} elem  要獲取的元素
 * 注：行內元素總爲0，隱藏元素也爲0
 */
function getElementClientSize(elem) {
    return {
        pw: elem.clientWidth,    // width + padding(左右)
        ph: elem.clientHeight,   // height + padding(上下)
        pdw: elem.offsetWidth,   // width + padding(左右) + border(左右)
        pdh: elem.offsetHeight   // height + padding(上下) + border(上下)
    }
}

• 元素的真實尺寸 測試地址

/**
 * 獲取元素的真實尺寸
 * @param {Dom} elem  要獲取的元素
 * 注：此寬度包括滾動隱藏內容，可視內容，內邊距,會減小滾動條所佔的大小
 */
function getElementSize(elem) {
    return {
        w: elem.scrollWidth,
        h: elem.scrollHeight
    }
}

• 已滾動的尺寸 測試地址

/**
 * 獲取滾動條已滾動的尺寸
 */
function getScrollSize() {
    var docElem = document.documentElement;
    var docBd = document.body;
    return {
        t: docElem.scrollTop || docBd.scrollTop,
        l: docElem.scrollLeft || docBd.scrollLeft
    }
}