空间坐标

视口与文档

首先理解视口（窗口）与文档的含义

• 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸
• 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等
• 当你打开控制台后，视口尺寸就相应变小了
• position 使用文档定位，fixed 使用视口定位
• 文档坐标在页面滚动时不发生改变
• 视口坐标的操作需要考虑滚动条的位置

视口与文档尺寸

视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置

方法	说明	注意
window.innerWidth	视口宽度	包括滚动条（不常用）
window.innerHeight	视口高度	包括滚动条（不常用）
document.documentElement.clientWidth	视口宽度
document.documentElement.clientHeight	视口高度	会随着浏览器视口大小，和是否打开控制台有关

几何尺寸

方法列表

下面是获取尺寸的方法或属性

方法	说明	备注	示例
element.getBoundingClientRect()	返回元素在视口坐标及元素大小，包括外边距，width/height 与 offsetWidth/offsetHeight 匹配	窗口坐标 getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置， ‌top‌：元素上边界距离视口上边界的像素距离。如果元素在视口上方外部，这个值可能是负数。 ‌right‌：元素右边界距离视口左边界的像素距离，等于left + width。 ‌bottom‌：元素下边界距离视口上边界的像素距离，等于top + height。 ‌left‌：元素左边界距离视口左边界的像素距离。如果元素在视口左侧外部，这个值可能是负数。 ‌width‌：元素的宽度，单位是像素。 ‌height‌：元素的高度，单位是像素‌。 x：元素左边界相对于视口的x坐标。 y：元素上边界相对于视口的y坐标‌。	'{"x":454,"y":70,"width":923,"height":40,"top":70,"right":1377,"bottom":110,"left":454}'
element.getClientRects()	行级元素每行尺寸位置组成的数组	和getBoundingClientRect()差不多
element.offsetParent	拥有定位属性的父级，或 body/td/th/table，是一个element元素	对于隐藏元素/body/html 值为 null
element.offsetWidth	元素宽度尺寸，包括内边距与边框和滚动条	offsetWidth：返回元素的宽度（content+padding+border）
element.offsetHeight	元素高度尺寸，包括内边距与边框和滚动条	offsetHeight：返回元素的高度（content+padding+border）
element.offsetLeft	相对于祖先元素的 X 轴坐标	offsetTop和offsetLeft属性都是相对于offsetParent的内边距边界进行计算的‌
element.offsetTop	相对于祖先元素的 Y 轴坐标
element.clientWidth	元素宽度，不包含边框，只包含内容和内边距，行元素尺寸为 0	clientWidth：返回元素的宽度（content+padding）
element.clientHeight	元素高度，不包含边框，只包含内容和内边距，行元素尺寸为 0
element.clientLeft	内容距离外部的距离，滚动条在左侧时包括滚动条尺寸
element.clientTop	内容距离顶部的距离，滚动条在顶部时包括滚动条尺寸	元素周围边框的厚度
element.scrollWidth	元素宽度，内容+内边距+内容溢出的尺寸
element.scrollHeight	元素高度，内容+内边距+内容溢出的尺寸
element.scrollLeft	水平滚动条左侧已经滚动的宽度
element.scrollTop	垂直滚动条顶部已经滚动的高度	用于控制距顶部距离

getComputedStyle

getComputedStyle属于window的对象方法，用于获取一个元素的所有最终使用的CSS属性值，为什么有时不能使用 getComputedStyle

• 尺寸设置 auto 时获取结果不可用
• 由于滚动条的存在，不同浏览器返回结果不同
• 当元素没有设置 CSS 尺寸时，获取不到相应的尺寸内容

与element.style的区别

• ‌element.style‌：只能获取和设置元素的行内样式（inline styles），即元素标签中的style属性所定义的样式。例如，element.style.backgroundColor = "blue"会将元素的背景颜色设置为蓝色。但这种方法无法获取嵌入样式或外部样式。
• ‌getComputedStyle‌：可以获取元素的所有最终使用的样式，包括内联样式、嵌入样式和外部样式。它是只读的，不能用于修改样式

getBoundingClientRect

使用 getBoundingClientRect 获取元素相对于文档的几何坐标信息。

• 如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。
• 如果box-sizing: border-box，元素的的尺寸等于 width/height。

getClientRects

getClientRects 用于返回多行元素所占的尺寸，下面示例将为每行返回所占的空间尺寸

<style>
  span {
    width: 200px;
    overflow: auto;
  }
</style>

<span>
网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。
</span>
<script>
  let span = document.querySelector('span')
  let info = span.getClientRects()
  console.log(info)
</script>

坐标点元素

JS 提供了方法获取指定坐标上的元素，如果指定坐标点在视口外，返回值为 NULL

• 坐标都是从左上角计算，这与 CSS 中的 right/bottom 等不同
• 窗口坐标类似于 position:fixed
• 文档坐标类似于 position:absolute

方法	说明
element.elementsFromPoint	返回指定坐标点所在的元素集合
element.elementFromPoint	返回指定坐标点最底层的元素

元素集合

返回指定坐标点上的元素集合

<style>
    div,
    main,
    p {
        width: 200px;
        height: 200px;
    }
</style>
<div>
    <main>
        <p></p>
    </main>
</div>
<script>
    const info = document.elementFromPoint(100, 100)
    console.log(info)
</script>

返回结果为

0: p
1: main
2: div
3: body
4: html

底层元素

返回坐标点上的底层的元素

<style>
    div,
    main,
    p {
        width: 200px;
        height: 200px;
    }
</style>
<div>
    <main>
        <p></p>
    </main>
</div>
<script>
    const info = document.elementFromPoint(100, 100)
    console.log(info)
</script>

返回结果为

p

滚动控制

下面掌握文档或元素的滚动操作

方法列表

方法	说明	说明
element.scrollLeft	获取和设置元素 X 轴滚动位置
element.scrollTop	获取和设置元素 Y 轴滚动位置
element.scrollBy()	按偏移量进行滚动内容	参数为对象，
element.scroll() 或 element.scrollTo()	滚动到指定的具体位置	参数为对象，
element.scrollIntoView(bool)	定位到顶部或底部	参数为 true 元素定位到顶部，为 false 定位到窗口底部