2 

$( 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在文档渲染和转换后放置新的。

当我调用我需要隐藏的东西（附加小提琴中的红色方块）时，我得到了错误的顶部/左侧getBoundingClientRect()。div我将蓝色方块的顶部/左侧设置为输出，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);

如何解决？

4

2 回答 2

1

You can just take the offsetTop and offsetLeft without worrying about the transform as the same transform is applied to the newly added div as well. I'm guessing that from the example.

$(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>

于 2017-11-14T10:41:15.020 回答
0

我有一个有效的答案，它可能还不是最好的答案，但它对我来说 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>

编辑

我的潜在解决方案唯一一次有点奇怪的是当你必须滚动时......所以在那儿被警告。

于 2017-11-14T10:31:14.630 回答