浏览器偏移量、尺寸、视口大小

神奇大叔

已于 2023-01-31 19:45:28 修改

阅读量554

点赞数 1

分类专栏： javaScript 浏览器文章标签： javaScript

于 2019-11-25 23:52:15 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103248173

版权

javaScript 同时被 2 个专栏收录

127 篇文章

订阅专栏

浏览器

17 篇文章

订阅专栏

本文深入探讨了浏览器中元素的定位方式，包括offsetParent、offsetTop和offsetLeft的使用，以及如何通过JavaScript函数获取元素距离顶部的实际距离。同时，详细解析了鼠标坐标的多种类型，如clientX、clientY、pageX、pageY等，及其在不同场景下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器内宽高

在这里插入图片描述

相对偏移

.offsetParent   离当前节点最近的，且具有定位的包含当前元素的元素
.offsetTop		当前元素外边框距离父元素顶部不包括边框的距离,没有时返回null
.offsetLeft		当前元素外边框距离父元素左不包括边框的距离,没有时返回null

获取元素距离顶部的距离

getElementTop(element) {
  var actualTop = element.offsetTop;    //这是获取元素距父元素的的距离
  var current = element.offsetParent;   //这是获取父元素
  while (current !== null) {      //当它上面有元素时就继续执行
    actualTop += current.offsetTop;   //这是获取父元素距它的的父元素左上角的距离
    current = current.offsetParent;
  }
  return actualTop;   
}

鼠标坐标

e.clientX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  不随滚动条滚动而改变；

e.clientY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  不随滚动条滚动而改变；

e.pageX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  随滚动条滚动而改变；

e.pageY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  随滚动条滚动而改变；

e.screenX     鼠标相对于显示器屏幕左上角x轴的坐标；  

e.screenY      鼠标相对于显示器屏幕左上角y轴的坐标；  

e.offsetX        鼠标相对于当前元素左上角X轴的坐标

e.offsetY        鼠标相对于当前元素左上角Y轴的坐标