Question

除偏移之外，是否有一种方法可以获取相对于文档的元素的客户端rect？ getBoundingClientRect（）获取相对于客户端浏览器的值。

我正在使用D3和jquery的height（）和width（）都在工作（我甚至试过把它做成window.load（）），但是offset（）是。也不是javascripts .offset

        return [$e.offset().top + $e.height()/2, 
            $e.offset().left + $e.width()/2]

$ e.height（）和$ e.width（）都返回0

这是一个SVG元素，我只是用它来编辑我的SVG。使用D3加载/处理SVG要容易得多。该项目与数据无关，只是一张地图。

Answer 1

使用element.getBoundingClientRect()本身会返回相对于视口的top和left值，就像您发现的那样。如果您希望它们相对于文档（并且不受滚动位置影响），您可以使用window.scrollY和window.scrollX添加滚动位置，如下所示：

const rect = element.getBoundingClientRect()

rect.left                   // (relative to viewport)
rect.top                    // (relative to viewport)
rect.left + window.scrollX  // (relative to document)
rect.top + window.scrollY   // (relative to document)

Source

Answer 2

这是一个ES6方法，它返回与getBoundingClientRect()相同但属于整个文档的所有相同属性。

const getOffsetRect = (el) =>

  let rect   = el.getBoundingClientRect();

  // add window scroll position to get the offset position
  let left   = rect.left   + window.scrollX;
  let top    = rect.top    + window.scrollY;
  let right  = rect.right  + window.scrollX;
  let bottom = rect.bottom + window.scrollY;

  // polyfill missing 'x' and 'y' rect properties not returned
  // from getBoundingClientRect() by older browsers
  if ( rect.x === undefined ) let x = left;
  else let x = rect.x + window.scrollX;

  if ( rect.y === undefined ) let y = top;
  else let y = rect.y + window.scrollY;

  // width and height are the same
  let width  = rect.width;
  let height = rect.height;

  return { left, top, right, bottom, x, y, width, height };
};

注意：它还会填充x和y道具，这些道具不会被旧浏览器从getBoundingClientRect（）返回

GetBoundingClientRect但相对于整个文档

2 个答案: