转换后 getBoundingClientRect 在 body 上没有按预期工作答案

【问题标题】：getBoundingClientRect not working as expected on body after transform转换后 getBoundingClientRect 在 body 上没有按预期工作
【发布时间】：2017-11-14 10:10:47
【问题描述】：

$( document ).ready(function() {
		
    $('body').append('<div id="tester2"></div>');
    $('#tester2').css({
    	position:'absolute',
      background:'blue',
      width: 10,
      height:10
    });
    setInterval(function(){ 
      var x = $('#tester')[0].getBoundingClientRect();
      $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
      $('#tester2').css({
	      top:x.top,
  	    left:x.left
    	});
    }, 1000);
    
    $('#jquery-version').text('jquery version: ' + $.fn.jquery);
});

#tester{
  position:absolute;
  top:50px;
  left:50px;
  width:10px;
  height:10px;
  background:red;
}

#page{
  min-height:200px;
}

body{
  border:2px solid green;
  transform: scale(1) translate(20px, 40px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>

我需要在现有的div 上放置一个div。现有的div 包含在具有 CSS 转换属性集的 HTML 文档的正文中。我需要在文档渲染和转换后放置新的div。

当我在需要隐藏的div 上调用getBoundingClientRect() 时（附加小提琴中的红色方块），我得到错误的顶部/左侧。我将蓝色方块的顶部/左侧设置为getBoundingClientRect() 的输出，它们不重叠。

setInterval(function(){ 
    var x = $('#tester')[0].getBoundingClientRect();
    $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
    $('#tester2').css({
        top:x.top,
        left:x.left
    });
}, 1000);

如何解决？

【问题讨论】：

您不能将转换添加到 x.top 和 x.left 吗？所以 (x.top + 20) 和 (x.left +40)

标签： javascript jquery getboundingclientrect

【解决方案1】：

您可以只使用offsetTop 和offsetLeft 而不必担心转换，因为同样的转换也适用于新添加的 div。我从这个例子中猜到了。

$(document).ready(function() {

  $('body').append('<div id="tester2"></div>');
  $('#tester2').css({
    position: 'absolute',
    background: 'blue',
    width: 10,
    height: 10,
    opacity: 0.6
  });
  var tester = document.getElementById('tester');
  $('#tester2').css({
    top: tester.offsetTop - 2, // 2px border for body
    left: tester.offsetLeft - 2
  });

  $('#jquery-version').text('jquery version: ' + $.fn.jquery);
});

#tester {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 10px;
  height: 10px;
  background: red;
}

#page {
  min-height: 200px;
}

body {
  border: 2px solid green;
  transform: scale(1) translate(20px, 40px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
  getBoundingClientRect on red tester returned:
  <span id="tester-pos"></span>
  <div id="jquery-version"></div>
</div>

【讨论】：

但是如果测试人员在另一个容器中，位置：relative。 offsetTop 将相对于它，而不是我需要的整个身体。
您可以将新的div 作为现有div 的兄弟而不是将其添加到正文中，这样可以使用相同的位置并且它也将继承所有其他转换。跨度>

【解决方案2】：

我有一个有效的答案，它可能还不是最好的答案，但它对我来说 100% 有效。

$( document ).ready(function() {
		
    $('body').append('<div id="tester2"></div>');
    $('#tester2').css({
    	position:'absolute',
      background:'blue',
      width: 10,
      height:10,
    });
    
    setInterval(function(){ 
      var x = $('#tester')[0].getBoundingClientRect();
      $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
      $('#tester2').css({
	      'top':x.top/2,
  	    'left':(x.left/2)+x.width
    	});
    }, 1000);
    
    $('#jquery-version').text('jquery version: ' + $.fn.jquery);
	});

#tester{
  position:absolute;
  top:50px;
  left:50px;
  width:10px;
  height:10px;
  background:red;
}

#page{
  min-height:200px;
}

body{
  border:2px solid green;
  transform: scale(1) translate(20px, 40px);
}

#tester2{
  transform: scale(1) translate(0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>

编辑

我的潜在解决方案唯一一次有点奇怪的是当你必须滚动时......所以要注意那里。

【讨论】：