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

常用相关位置

• 获取元素基于可视区左上角的位置 测试地址

/**
 * 获取元素基于可视区左上角的位置
 * @param {Dom} elem 
 * 注：获取元素4条边相对于窗口左上角的偏移值,平时做按需加载和滚屏动画经常用到它
 */
function getElementClientPos(elem) {
    var pos = elem.getBoundingClientRect();
    return {
        left: pos.left,
        top: pos.top,
        right: pos.right,
        bottom: pos.bottom
    }
}

• 获取无素到页面顶部的位置 测试地址

/**
 * 获取元素相对窗口左上角的偏移
 * @param {Dom} elem
 * 注：默认会忽略元素offsetParent的边框
 */
function getElementOffsetPos(elem){
    var top = 0,
        left = 0;
    while(elem) {
        top += elem.offsetTop;
        left += elem.offsetLeft;
        elem = elem.offsetParent;
    }
    return {
        top: top,
        left: left
    }
}