TypeError: getBoundingClientRect 不是 JS 中的函数

作者

TypeError: getBoundingClientRect 不是 JS 中的函数

TypeError: getBoundingClientRect is not a function in JS

出现“getBoundingClientRect is not a function”错误的原因有多种：

  • getBoundingClientRect()在不是 DOM 元素的值上调用方法。
  • 将 JS 脚本标记放在声明 DOM 元素的代码上方。
  • 拼写错误getBoundingClientRect（区分大小写）。

getboundingclientrect 不是函数

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

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <!-- ✅ Your JS script here ✅ -->
    <script type="module" src="index.js"></script>
  </body>
</html>

请注意，JS 脚本标签位于标签的底部body。

如果我们将 JS 脚本标记放在声明 DOM 元素的代码之上，它们将无法在文件中访问index.js。

这是相关的 JavaScript 代码。

index.js
const boxes = document.getElementsByClassName('box');

// ⛔️ TypeError: boxes.getBoundingClientRect is not a function
const result = boxes.getBoundingClientRect();

We called the
Element.getBoundingClientRect()
method on a NodeList and not on a DOM element.

# Only call getBoundingClientRect on valid DOM elements

Make sure to only call the getBoundingClientRect method on valid DOM elements
and place the JS script tag at the bottom of the body, after the DOM elements
have been declared.

index.js
const boxes = document.getElementsByClassName('box');

const result = boxes[0].getBoundingClientRect();

// 👇️ {bottom: 26.87..., height: ..., left: ..., right: ...}
console.log(result);

By accessing the element at index 0 of the NodeList, we got back a DOM
element, on which we can safely call the getBoundingClientRect method.

# Handle the case where the element might not exist

If the element you’re calling the method on sometimes doesn’t exist, check if
the element is present before calling getBoundingClientRect.

For example, a basic DOM element has a type of object, so we can check if the
value is an object and contains the getBoundingClientRect property before
calling the method.

index.js
const box = null;

if (typeof box === 'object' && box !== null && 'getBoundingClientRect' in box) {
  const result = box.getBoundingClientRect();
  console.log(result);
}

Our if condition uses the logical AND (&&) operator, so for the if block to
run, all conditions have to be met.

We first check if the box variable stores a value with a type of object because DOM elements have a type of object.

Then we
check if the variable is not equal to null.

Unfortunately, if you console.log(typeof null), you will get an "object"
value back, so we have to make sure the value is not null.

index.js
console.log(typeof null); // 👉️ "object"
The last thing we check for is that the object contains the getBoundingClientRect property.

Then we know we can safely call the getBoundingClientRect method on the
object.

This approach is called duck-typing.

When using duck-typing, we simply check if the object implements specific
properties or methods and if it does, we assume it’s an object of the correct
type.

If the error persists, make sure you haven’t misspelled getBoundingClientRect as method names are case-sensitive.

You can also console.log the value you’re calling the method to make sure it’s
a valid DOM element.

I’ve also written an article on
how to check if two elements overlap.

# Conclusion

To solve the “getBoundingClientRect is not a function” error, make sure to
only call the getBoundingClientRect method on valid DOM elements and place the
JS script tag at the bottom of the body, after the DOM elements have been
declared.