获取 DOM 元素流入位置

Question

alert("Wrong (red): " + document.getElementById("target").getBoundingClientRect().top);
alert("Correct (blue): " + document.getElementById("wrapper").getBoundingClientRect().top);

#target {
  transform: translate(20px, -20px) rotateZ(20deg);
  background: red;
  width: 50px;
  height: 50px;
}
#wrapper {
  background: blue;
  display: inline-block;
}

Text
<div id="wrapper">
  <div id="target">
  </div>
</div>
further text

在上面的示例中，蓝色方块具有确切的位置，如果没有transform，红色方块会有。它也恰好具有红色方块占用的空间和位置，作为流入元素。我想在 JavaScript 中得到的位置是蓝色方块的位置。我唯一的问题是，在我的原始代码中，没有#wrapper，我无法创建一个。那么我如何获得可能在或可能不在该位置的元素的流入位置（由于transform、position: relative; 或其他 - 如果有的话）？

欢迎使用纯 JS 或 jQuery 解决方案。但我寻找一个相当简单/简短的解决方案，而不是一些 50 多行的怪物。

我的尝试：

• jQuery('#target').offset()：考虑transform（在上面的示例中返回一些负数）。
• document.getElementById('target').getBoundingClientRect()：与 jQuery 的 offset 相同
• jQuery('#target').position() 遍历 offsetParent：可能 目前可以工作，但根据@987654321，jQuery 在这方面的行为被认为是 错误 或至少会发生变化@site（如果我正确解释了该网站）。

Answer 1

使用WebKitCSSMatrix

  var node = document.getElementById("target");
  var curTransform = new   WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
  console.log(node.offsetLeft + curTransform.m41); //real offset left
  console.log(node.offsetTop + curTransform.m42); //real offset top

浏览器兼容性：

• 查看this answer 了解如何处理不支持WebKitCSSMatrix 的浏览器