专栏首页JS菌整理获取 viewport 和 element 尺寸和位置方法

整理获取 viewport 和 element 尺寸和位置方法

整理获取 viewport 和 element 尺寸和位置方法

⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅

视口页面或窗口的位置和宽高

获取视口宽高

下面方法是包括滚动条的宽高,不支持 IE8

window.innerWidth
window.innerHeight

width + padding + border + 滚动条 另外 outerWidth 浏览器兼容差,可获取包括工具栏的宽高

页面滚动位置

返回整个页面的滚动的位置,pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致,前者是后者的别名,建议使用前者,不支持 IE8

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

窗口在显示器的位置

标准浏览器使用的是 screenX/screenY,IE 中使用的是 screenLeft/screenTop

window.screenLeft || window.screenX
window.screenTop || window.screenY

元素几何尺寸和位置

元素占用的空间尺寸和位置

getBoundingClientRect

使用方法 getBoundingClientRect() 返回的值见下图:

IE 只返回 top right bottom left 四个值,如果需要 width height 则需要计算:

function getBoundingClientRect(elem) {
    let rect = elem.getBoundingClientRect()
    return {
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
        width: rect.width || rect.right - rect.left,
        height: rect.height || rect.bottom - rect.top
    }
}

clientWidth/clientHeight

返回元素不含滚动条的尺寸,不包括边框

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
  • 如果是 document.documentElement,那么返回的是不包含滚动条的视口尺寸
  • 如果是 document.body,并且是在混杂模式下,那么返回的是不包含滚动条的视口尺寸

clientLeft/clientTop

返回的是计算后的 CSS 样式的 border-left-width/border-top-width 的值,就是边框的宽度

offsetWidth/offsetHeight

同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸,这个方法返回元素本身的宽高 + padding + border + 滚动条

offsetLeft/offsetTop

相对于最近的祖先定位元素(CSS position 属性被设置为 relative、absolute 或 fixed 的元素)的左右偏移值

offsetLeft/offsetTop 返回元素 X Y 坐标值

计算元素的位置:

function getElementPosition(e) {
    var x = 0, y = 0;
    while (e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent; // 获取最近的祖先定位元素
    }
    return {
        x: x,
        y: y
    };
}

元素内容的宽高和滚动距离

scrollWidth/scrollHeight

这个方法返回元素内容区域的宽高 + padding + 溢出内容尺寸

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight
  • 如果元素是 document.documentElement,返回的是视口滚动区域宽度和视口宽度中较大的那个
  • 如果元素是 document.body,并且是在混杂模式下,那么返回的是视口滚动区域宽度和视口宽度中较大的那个

scrollLeft/scrollTop

这个方法返回元素滚动条的位置

  • 如果元素是根元素,那么返回 window.scrollY 的值
  • 如果元素是 body,并且在混杂模式下,那么返回的是 window.scrollY 的值

因此可用于处理页面滚动的距离的兼容

本文分享自微信公众号 - JS菌(awesomefe),作者:Oliveryoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译]async-await 数组循环的几个坑

    在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子...

    JS菌
  • 大白话解释作用域和闭包是个啥

    常见的变量作用域就是 静态作用域(词法作用域) 与 动态作用域 。词法作用域注重的是 write-time ,即 编程时的上下文 ,而 动态作用域 则注重的是 ...

    JS菌
  • 修饰器模式

    https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

    JS菌
  • CSS魔法堂:Position定位详解

    一、Position各属性值详解                       1.  static :默认值,元素将按照正常文档流规则排列。   2.  rel...

    ^_^肥仔John
  • PHP strpos,strstr,strpbrk这几个函数有什么区别

    确定一个字符串是否在另一个字符串中,在PHP中有很多方法实现。strpos,strstr,strpbrk这几个函数都可以实现。那么这几个函数有什么不同呢?

    写PHP的老王
  • MySQL基于复制的架构方案

    老七Linux
  • 笔记 | GWAS 操作流程1:下载数据

    这里,总结一下GWAS的学习笔记,GWAS全称“全基因组关联分析”,使用统计模型找到与性状关联的位点,用于分子标记选择(MAS)或者基因定位,这次学习的教程是p...

    邓飞
  • 【Data Mining】机器学习三剑客之Pandas常用用法总结(上)

    看pandas之前我建议先看我的numpy总结,效果更佳。 【Data Mining】机器学习三剑客之Numpy常用用法总结 可以大概理解为numpy主要是用来...

    接地气的陈老师
  • 关于大脑,这五个“常识”其实是谣言

    大数据文摘
  • Python|GUI编程Button组件介绍

    接着上一篇python GUI编程的基础介绍,接下来详细介绍一下里面的Button组件,下面我会以最详细的描述介绍这个组件里的参数。先把一个组件放到一个窗口上,...

    算法与编程之美

扫码关注云+社区

领取腾讯云代金券