无法在 JS 中读取未定义的属性（读取“顶部”）

作者

无法在 JS 中读取未定义的属性（读取 ‘top’）

TypeError: Cannot read property ‘top’ of Undefined in JS

出现“无法读取未定义的属性（读取‘top’）”错误的主要原因有两个：

  1. 访问top不存在的 DOM 元素的属性。
  2. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法读取未定义的属性顶部

下面是错误如何发生的示例。

索引.js
const el = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'top')
console.log(el.top);

如果您使用不存在的标识符，则最常发生该错误。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="box">Content</div>

    <script src="index.js"></script>
  </body>
</html>

这是试图访问不存在的元素的相关 JS 代码。

索引.js
const el = $('#does-not-exist');
console.log(el);

// ⛔️ Cannot read properties of undefined (reading 'top')
console.log(el.offset().top);

调用该offset()方法返回一个undefined值并访问该
top属性会导致错误。

top在访问属性之前确保元素存在

确保您正在访问其top属性的 DOM 元素存在。

您还可以有条件地检查以避免出现错误。

索引.js
const el = $('#does-not-exist');

// ✅ Using optional chaining
const result1 = el?.offset()?.top;
console.log(result1);

undefined如果引用等于or ，可选链接 (?.) 运算符会短路而不是抛出错误null。

出现错误的另一个常见原因是将 JS 脚本标记放在声明 DOM 元素的代码之上。

将你的 JS 脚本标签放在 body 标签的底部

在声明 HTML 元素之后，确保 JS 脚本标记位于正文的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="box">Content</div>

    <!-- ✅ GOOD - Script is run after div is declared ✅ -->
    <script src="index.js"></script>
  </body>
</html>

请注意，我们将index.js脚本标记放在创建元素的代码下方
div。

如果 JS 脚本标记位于创建div元素的代码上方，则该元素将无法在index.js文件中访问。

索引.js
const el = $('#box');
console.log(el);

// ✅ Works
console.log(el.offset().top); // 👉️ 8

当提供正确的标识符并在创建元素后加载 JS 脚本标记时，我们可以访问该top属性而不会出现错误。

结论

尝试访问top某个undefined值的属性时，会发生“无法读取未定义的属性（读取‘top’）”错误。

要解决该错误，请确保仅访问top有效 DOM 元素上的属性。