一文梳理Window、Element和Event相关大小、位置API

Kuroo
257 阅读2分钟

本文为mdn下Window、Element和Event相关大小、位置API的梳理，遍于查询使用，有错误请纠正。

Window:

属性：

  • innerWidth 文档窗口的宽度（包含垂直滚动条,代表视觉视口）

  • outerWidth 浏览器窗口外部的宽度

  • scrollX（别名pageXOffset） 文档/页面水平方向滚动的像素值

  • screenLeft 返回浏览器左边框到左边屏幕边缘的 CSS 像素数

  • screenX 浏览器左边界到操作系统桌面左边界的水平距离

方法：

  • Window.scrollTo({ x, y, options})

  • Window.getComputedStyle 获取计算后css属性值

Element

属性

  • clientWidth 元素内部的宽度（整数，包括内边距，不包括边框、外边距和垂直滚动条，代表布局视口）

  • 在根元素（ 元素）或怪异模式下的 元素上使用 clientHeight 时，该属性将返回视口宽度, 如下图 image.png 【图片来自MDN】

  • clientLeft 左边框的宽度

  • scrollHeight 返回整数，等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度,包括元素的 padding，但不包括元素的 border 和 margin,如下图

image.png 【图片来自MDN】

  • scrollHeight 当元素作为内容时，和clientHeight相等，作为容器时符合定义

  • 包含:before 或:after 等伪类元素的高

  • scrollTop 可以获取或设置一个元素的内容垂直滚动的像素数,scrollTop可能会提供一个小数。

  • 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量

  • offsetLeft 首先得确定元素的offsetParent。offsetParent指的是距该元素最近的position不为static的祖先元素，或者最近的 table, td, th, body 元素。确定了offsetParent，offsetLeft指的是元素左侧偏移offsetParent的距离，同理offsetTop指的是上侧偏移的距离。

  • 元素不脱离文档流 值为offsetParent边框 + 元素外边距

  • 元素脱离文档流 值为x\y + 外边距

  • offsetWidth 包括元素的边框、内边距和滚动条。返回值是一个经过四舍五入的整数

  • 方法

  • getBoundingClientRect 提供了元素的大小及其相对于视口的位置

image.png 【图片来自MDN】

  • left、top、right、bottom、x、y相对于视口

  • width、height(包括边框\padding\内容)

Event

属性

  • clientX 当前窗口(window/嵌套iframe)的水平坐标，不论是否有滚动,双精度浮点数

  • screenX 屏幕的水平坐标

  • pageX 接口返回的相对于整个文档的 x（水平）坐标以像素为单位的只读属性(scroll的效果)

  • offsetX 双精度浮点值,规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量(即从边框开始计算)

avatar
文章
阅读
粉丝