javascript中的.getBoundingClientRect().top和.getBoundingClientRect().y有什么区别？

Question

我真的很困惑这两种方法之间的区别。每次我使用主题时，它们都有相同的值，那么有什么区别？

这是我尝试作为示例的代码。

const btnGetCoord = document.querySelector(".get--section--coordination");
const section1 = document.querySelector("#section--1");

btnGetCoord.addEventListener("click", (e) => {
    const sec1Coords = section1.getBoundingClientRect();
    console.log(sec1Coords.y);
    console.log(sec1Coords.top);
});

// html code
<button class="get--section--coordination">get section 1 coordination</button>
    <div style="background-color: green;width: 100vw;height: 2000px"></div>
    <section id="section--1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis dolorum
        ducimus, eius eligendi eos error et eum explicabo fugiat fugit iure laboriosam maiores natus nesciunt
        perspiciatis provident quia quidem quo ratione repellat rerum saepe sed. Blanditiis impedit nulla porro
        praesentium quas ut voluptate. Dolores, et voluptates? Consequatur quidem, voluptates.
        </p>
    </section>

为什么它们总是相同，如果不同的话有什么区别？

Answer 1

getBoundingClientRect 返回一个 DomRect 对象。

y：

DOMRect 原点的 y 坐标（通常是矩形的左上角）。

顶部：

返回 DOMRect 的顶部坐标值（与 y 具有相同的值，如果高度为负则为 y + height）。

所以两者确实相等，除非

height

为负数，在这种情况下

top

将等于

y + height