脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS获取页面尺寸

JS 获取页面尺寸的方法详解

 更新时间：2023年09月05日 08:35:06   作者：编程三昧  
通过 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

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

获取页面scrollTop

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

获取页面可视宽度

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

获取页面可视高度

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

获取页面宽度

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

到此这篇关于JS 获取页面尺寸的方法详解的文章就介绍到这了,更多相关JS获取页面尺寸内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript之Getters和Setters 平台支持等详细介绍

    JavaScript之Getters和Setters 平台支持等详细介绍

    现在，JavaScript的Getters和Setters使用非常广泛，它和每个JavaScript开发者的切身利益息息相关,我们先来快速了解什么是Getters和Setters，以及它们为什么很有用.然后，我们来看看现在都有哪些平台支持Gettets和Setters
    2012-12-12
  • Uniapp中使用Echarts的详细过程

    Uniapp中使用Echarts的详细过程

    这篇文章主要介绍了Uniapp中使用Echarts的示例详解这里只举例折线图，介绍了uni-app微信小程序使用echarts的方法,下载echart组件，可以先随便建个文件夹，然后 npm init，接着下载依赖，需要的朋友可以参考下
    2022-11-11
  • childNodes.length与children.length的区别

    childNodes.length与children.length的区别

    childNodes.length与children.length的值常不一样。
    2009-05-05
  • 2026前端面试题及答案总结大全(最新版)

    2026前端面试题及答案总结大全(最新版)

    这篇文章主要介绍了2026前端面试题及答案总结的相关资料,通过示例代码讲解了HTML/CSS盒模型、CSS选择器优先级计算、块级格式化上下文、JavaScript事件循环机制、ES6中变量声明差异、Promise原理及实现、React与Vue响应式机制与性能优化手段等内容,需要的朋友可以参考下
    2026-06-06
  • 改进UCHOME的记录发布，增强可访问性用户体验

    改进UCHOME的记录发布，增强可访问性用户体验

    今天是看到UCDChina上的一篇文章文章 ，是关于SNS的用户体验问题，发觉文中提到的第一个细节，UCHOME就做的不好，于是改进了一下。
    2011-01-01
  • uniapp微信小程序:key失效的解决方法

    uniapp微信小程序:key失效的解决方法

    这篇文章主要介绍了uniapp微信小程序:key失效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JS前端千万级弹幕数据循环优化示例

    JS前端千万级弹幕数据循环优化示例

    这篇文章主要为大家介绍了JS前端一千万条弹幕数据循环优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • JS事件绑定的常用方式实例总结

    JS事件绑定的常用方式实例总结

    这篇文章主要介绍了JS事件绑定的常用方式,结合实例形式总结分析了javascript三种常见的事件绑定原理与操作技巧,需要的朋友可以参考下
    2019-03-03
  • JS拖动鼠标画出方框实现鼠标选区的方法

    JS拖动鼠标画出方框实现鼠标选区的方法

    这篇文章主要介绍了JS拖动鼠标画出方框实现鼠标选区的方法,涉及javascript鼠标事件及页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript数据类型转换详解（推荐）

    JavaScript数据类型转换详解（推荐）

    众所周知JavaScript是一门弱类型（语言，即变量的类型是不确定的。所以下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下
    2021-05-05

最新评论