JS 获取页面尺寸

编程三昧2023-09-04 22:59

通过 JS 获取页面相关的尺寸是比较常见的操作，尤其是在动态计算页面布局时，今天我们就来学习一下几个获取页面尺寸的基本方法。

获取页面高度

js 复制代码

function getPageHeight() {
  var g = document,
    a = g.body,
    f = g.documentElement,
    d = g.compatMode == "BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}

获取页面scrollLeft

js 复制代码

function getPageScrollLeft() {
  var a = document;
  return a.documentElement.scrollLeft || a.body.scrollLeft;
}

获取页面scrollTop

js 复制代码

function getPageScrollTop() {
  var a = document;
  return a.documentElement.scrollTop || a.body.scrollTop;
}

获取页面可视宽度

js 复制代码

function getPageViewWidth() {
  var d = document,
    a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  return a.clientWidth;
}

获取页面可视高度

js 复制代码

function getPageViewHeight() {
  var d = document,
    a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  return a.clientHeight;
}

获取页面宽度

js 复制代码

function getPageWidth() {
  var g = document,
    a = g.body,
    f = g.documentElement,
    d = g.compatMode == "BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}

~ 全文完