📌  相关文章
📜  网络API | DOMRectReadOnly y 属性(1)

📅  最后修改于: 2023-12-03 15:27:39.256000             🧑  作者: Mango

网络API | DOMRectReadOnly y 属性介绍

概述

DOMRectReadOnly 对象表示元素的大小和位置，其中 y 属性表示元素的顶部 y 轴坐标值。它是一个只读属性，可以通过调用元素的 getBoundingClientRect() 方法获得 DOMRectReadOnly 对象。

语法
const y = domRectReadOnlyObject.y;
返回值

y 属性返回一个 float 值，表示元素的顶部 y 轴坐标值。

示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOMRectReadOnly y 属性示例</title>
</head>
<body>
  <div id="box" style="width: 100px; height: 100px; position: relative; top: 50px; left: 50px; border: 1px solid black;"></div>
  <script>
    const box = document.getElementById('box');
    const rect = box.getBoundingClientRect();
    console.log(rect.y);
    // output: 50
  </script>
</body>
</html>
备注
  • y 属性返回的坐标值是元素相对于浏览器窗口的距离。
  • getBoundingClientRect() 方法返回的 DOMRectReadOnly 对象包含四个属性：left、top、right 和 bottom。它们分别表示元素的左边界 x 轴坐标值、顶部 y 轴坐标值、右边界 x 轴坐标值、底部 y 轴坐标值。
  • 可以通过改变元素的位置和大小，来改变 y 值的返回值。