Jquery报错：r.getClientRects is not a function，求原因及元素top值获取方法

Hey, let's figure out this error and fix your element top value issue!

Why You're Seeing That Error #

The jquery.min.js:2 Uncaught TypeError: r.getClientRects is not a function error almost always boils down to one thing: the parameter you're passing to getTop() isn't a valid DOM element or jQuery object.

You mentioned passing this (the button's DOM element) when clicking the button, but somewhere between calling verifPosition(pass) and getTop(element), the element variable might have been accidentally altered to an invalid value—like undefined, a plain object, or something that isn't a DOM node. jQuery's offset() method tries to call the native getClientRects() method on the underlying element, and if it can't find a valid DOM node to work with, it throws this error.

First, let's add a quick validation check to your verifPosition function to catch invalid inputs early:

function verifPosition(element) {
  // Validate we're working with a real DOM element
  if (!element || !(element instanceof HTMLElement)) {
    console.error("Oops, you didn't pass a valid DOM element!");
    return;
  }
  // Now safely proceed with your condition
  if (getTop(element) /* ... your logic here ... */) {
    // Your code
  }
}

Alternative Ways to Get an Element's Top Value #

If you want to switch up your approach or avoid jQuery entirely, here are reliable options:

1. Native JS with getBoundingClientRect()

This method returns the element's position relative to the browser viewport. If you need the position relative to the entire document, add the current scroll offset:

// Get top position relative to viewport
function getTop(element) {
  if (!(element instanceof HTMLElement)) return 0;
  return element.getBoundingClientRect().top;
}

// Get top position relative to document top
function getTopRelativeToDoc(element) {
  if (!(element instanceof HTMLElement)) return 0;
  const rect = element.getBoundingClientRect();
  return rect.top + (window.pageYOffset || document.documentElement.scrollTop);
}

2. Native JS with offsetTop

This property returns the distance from the element to its closest positioned parent element. To get the full distance to the document top, recursively add up offsets from all parent elements:

function getTop(element) {
  if (!(element instanceof HTMLElement)) return 0;
  let totalTop = 0;
  let currentEl = element;
  while (currentEl) {
    totalTop += currentEl.offsetTop;
    currentEl = currentEl.offsetParent;
  }
  return totalTop;
}

3. Safer jQuery Approach

If you still want to use jQuery, add checks to ensure your element exists in the DOM:

function getTop(par) {
  const $element = $(par);
  // Make sure the element is actually present in the DOM
  if ($element.length === 0) {
    console.error("Target element not found!");
    return 0;
  }
  // Use optional chaining to avoid errors if offset() returns nothing
  return $element.offset()?.top || 0;
}

Quick Debug Tip #

Before making any code changes, add a console.log(element) right before calling getTop(element) in verifPosition—this will let you see exactly what value you're passing, which will confirm if an invalid parameter is the root cause.

内容的提问来源于stack exchange，提问作者Q.Kira