JavaScript DOM 尺寸

111 阅读1分钟

可以使用 DOM(文档对象模型)来访问和操作 HTML 文档中的元素。以下是一些常见的获取元素尺寸的方法:

dom.Element.getBoundingClientRect() 元素相对于窗口的位置

用于定位元素在viewport 的位置

image.png

获取元素文档宽度

image.png

获取窗口,视口宽度

image.png

记忆

  • 浏览器 outer
  • 屏幕 screen
  • 视口(滚条)inner
  • HTML可视document.documentElement.clientWidth()

image.png

image.png 调用 dom.scrollTo(x, y)可以设置元素的滚动位置,x 和 y 分别表示 scrollLeft 和 scrollTop

该方法通用元素回到元素顶部 dom.scrollTo(0, 0)

如果要监听元素的滚动,可以监听事件类型:==scroll==

image.png