避不开的位置属性系列一 | 青训营笔记

Tomtu
250 阅读5分钟

这是我参与第四届青训营笔记创作活动的第1天

前言

事情是这样的，一直犹豫不决要写哪个方面的笔记，直到今天看到自己以前做的demo后才决定要不就聊一聊关于offsetX等一系列位置相关的知识，正好为项目做准备！

概念一通输出

于我而言，在前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。

在 DOM 设计中，主要通过这些 API 来确定某个元素的具体位置。

offsetTop, offsetLeft, offsetWidth, offsetHeight,

scrollTop, scrollLeft, scrollWidth, scrollHeight,

clientTop, clientLeft, clientWidth, clientHeight,

那么，为什么会有这么多属性来定位一个元素呢？ 我觉得这和盒子模型脱不了关系，我们先一起复习一下盒子模型。

盒子模型

一个盒子就是一个区域，包含 margin、border、padding 和 content， 6 个属性可以帮助我们非常容易去定位元素。

让我们随便在一个网页上Ctrl+shift+J调出浏览器控制台，再找到样式区域顺势往下滑，就会出现如图所示：

image.png

图中的962×24就是上文所说的content

好了，点到为止，下面让我们进入今日重点，找不同环节。

识别位置属性及API

除了上文所提到的API，其他涉及到的我们也一起总结

首先是screen系列

  • screenX: 屏幕X坐标位置
  • screenY: 屏幕Y坐标位置

screenX、screenY为鼠标当前点击位置距离电脑桌面左上角的距离，总是参考屏幕(桌面)进行定位，获取尺寸。

其次是client系列

  • clientX: 鼠标的坐标到页面左侧的距离
  • clientY: 鼠标的坐标到页面顶部的距离
  • clientTop：相当于border-top
  • clientLeft：相当于border-left
  • clientWidth：可视区域的宽度，不包含border
  • clientHeight：可视区域的高度，不包含border

client 相关的属性描述的是自身的位置，它没有相对元素。

image.png

接着是page系列

  • pageX: 页面X坐标位置
  • pageY: 页面Y坐标位置

pageX、pageY和clientX、clientY很相似，但是不同点在于：

  • pageX = clientX + 横向滚动距离
  • pageY = clientY + 纵向滚动距离

再接着是offset系列

  • offsetX：鼠标坐标到元素的左侧的距离
  • offsetY：鼠标坐标到元素的顶部的距离
  • offsetLeft：该元素外边框距离包含元素内边框左侧的距离
  • offsetTop：该元素外边框距离包含元素内边框顶部的距离
  • offsetWidth: width + padding + border
  • offsetHeight: height + padding + border

其中，offsetX 是 HTMLElement 的只读属性，不可以修改。

offset 有“偏移” 的意思，我们很容易会把这个属性想成与滚动有关，但其实它跟滚动没啥关系，那是下文scroll的问题。在这我们再先看 offsetTop这个属性，它表示当前元素顶部到 offsetParent 节点的距离。 这里关键点是 offsetParent (包含元素)，它是指当前元素最近的使用 position 不为 static 的祖先节点，如果没有使用 position 的祖先节点，它的值将是 body 节点（这个值有可能也是 null，如果出现这些极端情况可以查 MDN）。其实关键点是相对谁偏移了多少的问题，我们可以通过定位改变包含元素。

但仍需注意的是，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框。

还有一个scroll系列

  • scrollLeft：被卷起的宽度
  • scrollTop：被卷起的高度
  • scrollHeight: 获取对象的滚动的高度。
  • scrollWidth：获取对象的滚动的宽度

何谓被卷起的宽度，即设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离，而被卷起的高度，也就是设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

由上文总结我们可以知道，scroll 真正与滚动相关，只有元素可以滚动，scrollTop 才会有值，否则为 0，也就是说当子元素的高度大于父元素时，设置父元素的 overflow 为 scroll 才会生效。当 子div 的高度超出 父div 时，父div 需要通过把 overflow 设置为 scroll，这时候 子div 才可以滚动。scrollTop 的值可以修改，表示在滚动区域中，竖直方向滚动了多少。通常通过修改这个值来实现让某个元素滚动到指定位置。

关于 scrollHeight 这个也需要特别留意，父 div 的 scrollHeight 是通过子div 计算的，表示可滚动的高度。scrollWidth 与 scrollHeight 类似。

最后提一嘴

window.innerWidth：返回当前浏览器可视内容区域的宽度 window.innerHeight：返回当前浏览器可视内容区域的高度

值得注意的是，当进行浏览器窗口缩放时，会改变当前浏览器可视内容区域的尺寸，影响window.innerWidth、window.innerHeight的大小。 outerWinth、outerHeight与innerWidth、innerHeight的区别在于outerWidth计算了内容区域及工具栏，滚动条在内的总宽高

最后的最后，一图胜千文。

image.png

图源于blog.csdn.net/mafan121/ar…

不过，我认为，想要搞懂这个必须通过 demo 实践，那么，谢谢大家这么厉害还来看我，如果发现问题或者需要补充的点麻烦大家通过评论告诉我。如果感兴趣的话下次来看看我的demo。博取众长，共同进步！

avatar
文章
阅读
粉丝