DOM – Dimension & Coordinate (offset, client, computed, rect)

前言

很多年前有记入过一篇 box-sizing 和 dom width.

想想也挺可悲的, 那年我是负责后端的, 却要帮着前端去学习这些知识来解决问题...

也好, 现在 full stack, 也算没有浪费当年的努力. 这篇是翻新版本.

和 Dimension 相关的属性

我这里以 div height 作为例子. 你把它们都换成 width 理解也是一样的.

offset-height

client-height

height (getComputedStyle)

scroll-height

rect height (getBoundingClientRect)

以上就是常见的高度

影响 dimension 的属性

它们会被

box-sizing

border

padding

scale

有没有 scollbar 影响

但不受 margin, outline 影响 (许多人误以为会)

各个属性计算

offset-height

它是 border to border

border, padding, scrollbar, content 全算在内，除了 margin

红色是 border, 粉红色是 padding, 右边红线表示它计算的范围

client-height

它是 padding to padding 扣掉 scrollbar

padding, content 算，margin, border, scrollbar 不算。

scrollbar 一般上是在 padding 里面 (重叠的)，如果没有 padding 或者 padding size 小于 scrollbar，那 content 会被挤压。

height (getComputedStyle)

height 的计算 depend on box-sizing

border-box 情况下, height 包括 border 和 padding.

content-box 情况下, heigth 不包括 padding 和 border (当然也不包括 scrollbar)

scroll-height (对标 client-height)

在 hug content 的情况下, scroll-height 和 client-height 始终是一致的.

只有在 overflow-y: auto 的情况下才会使用到 scroll-height. (注意: visiable 情况下 scroll-height 的计算和 auto 是不同的哦, 我也没有搞懂, 但一般场景都是 auto 嘛, 以后再研究呗)

当 overflow-y 的时候, client-height 就变小了.

这个时候通过 scroll-height 就可以拿到原本的 client-height 的尺寸.

容易混淆的情况:

假设出现了 horizontal scrollbar, 请问 scroll-height 和 client-height 一样吗?

答案是 yes. 因为那是 horizontal scrollbar, 仅代表 width 的内容超过了, height 并没有, 而 scroll-height 是看有没有 vertical scrollbar 的出现.

同时 client-height 会少算 horizontal scrollbar 同样的 scroll-height 也会少算 horizontal scrollbar.

rect height (getBoundingClientRect) (对标 offset-height)

在没有 scale 的情况下, 它和 offset-height 始终保持一致.

有 scale 的情况下, 它获取的是 scale 之后的高度. 比如 offset-height 是 100px, scale 1.5

那么 reat height 就是  100 x 1.5 = 150px

另外, rect height 比 offset-height 精准，因为 rect height 有小数点，而 offset-height 是 int 它会自动 rounding。

也可以参考这里

经典图片

MouseEvent 的 Coordinate

mouse event 里有 4 种 coordinate info.

分别是 page, screen, client, offset

场景说明:

2 个 section 2 个 box

offset coordinate

event.offsetX, event.offsetY

event listening 的 target element 和 mouse click 点之间的距离 (AKA target relative)

注意 parent child 冒泡的情况

假设 parent pink color div 有 mouseenter event

当 mouse 进入 parent pink color div。它的 offset 对标的是 parent div。上图的第一个红点。

当 mouse 进入 child blue color div。它的 offset 对标换成了 child div，不再是 parent div 了。

虽然 event 只绑定在 parent div，但是 offset x,y 认的是最靠近的 offset element。

另外一点需要注意，当有 transform 的时候

虽然 img 有 translate 了，但是 mouse click 图片左上角依然拿到 0,0

img scale(2)，虽然 mouse click 的距离 actual 是 220,80 但是获取到的是 110, 40，因为放大了一倍，所以少了一半。

这就是它的效果。注意咯

screen coordinate

event.screenX, event.screenY

mouse click 点和 screen 的距离. 注意哦, 我的 browser 是缩小的, 它依然是计算到最外面 monitor screen 的距离. (AKA screen relative)

client coordinate

event.clientX, event.clientY

clientX, Y 是最常被使用到的. 它和 getBoundingClientRect x,y 一样. (AKA window relative)

page coordinate

page 和 client 类似, 只是它有算 scroll, 所以会比 client 多. (AKA document relative)