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
    }
}