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 的执行顺序

    浅谈JavaScript 的执行顺序

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马
    2015-08-08
  • 微信小程序实现简单评论功能

    微信小程序实现简单评论功能

    这篇文章主要为大家详细介绍了微信小程序实现简单评论功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Js注册协议倒计时的小例子

    Js注册协议倒计时的小例子

    Js注册协议倒计时的小例子,需要的朋友可以参考一下
    2013-06-06
  • 原生JS实现小小的音乐播放器

    原生JS实现小小的音乐播放器

    这篇文章主要为大家详细介绍了原生JS实现音乐播放器,支持循环、随机播放,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • json对象和formData相互转换的方式详解

    json对象和formData相互转换的方式详解

    我们有两种常见的传参方式: JSON 对象格式和 formData 格式,但是一些场景是需要我们对这两种数据格式进行转换的,这篇文章主要介绍了json对象和formData相互转换的方式详解,需要的朋友可以参考下
    2023-02-02
  • js判断为空Null与字符串为空简写方法

    js判断为空Null与字符串为空简写方法

    最近开始研究JavaScript的简写方法,下面就是有关判断为空的简写方法
    2014-02-02
  • JavaScript设计模式之命令模式

    JavaScript设计模式之命令模式

    这篇文章主要介绍了JavaScript设计模式之命令模式,命令设计模式是由发令者、执行者、命令对象三部分构成,文章由此展开详细的内容介绍,需要的小伙伴可以参考一下
    2022-06-06
  • 微信小程序实现一个自定义遮罩层效果

    微信小程序实现一个自定义遮罩层效果

    这篇文章主要介绍了微信小程序实现一个自定义遮罩层,大概效果是点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】

    JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】

    这篇文章主要介绍了JavaScript数据结构与算法之检索算法,结合实例形式分析了二分查找法、计算重复次数相关算法原理与使用技巧,需要的朋友可以参考下
    2019-02-02
  • 原生JavaScript实现todolist功能

    原生JavaScript实现todolist功能

    本篇文章给大家介绍了通过原生JavaScript实现todolist功能相关知识点,对此有需要的朋友可以学习下。
    2018-03-03

最新评论