Javascript 转换后，getBoundingClientRect在主体上未按预期工作

$（文档）.ready（函数（）{
$（'body'）。追加（''）；
$（'#tester2'）.css({
位置：'绝对'，
背景：'蓝色'，
宽度：10，
身高：10
});
setInterval（函数（）{
var x=$（'#tester'）[0]。getBoundingClientRect（）；
$（“#测试仪位置”）.text（'top:'+x.top+'，left:'+x.left）；
$（'#tester2'）.css({
top:x.top，
左：x左
});
}, 1000);
$（'#jquery version'）.text（'jquery version:'+$.fn.jquery）；
});
#测试仪{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：10px；
高度：10px；
背景：红色；
}
#页面{
最小高度：200px；
}
身体{
边框：2倍纯绿；
变换：缩放（1）平移（20px，40px）；
}

返回红色测试仪上的getBoundingClientRect：
我有一个有效的答案，它可能不是最好的答案，但对我来说100%有效


$（文档）.ready（函数（）{
$（'body'）。追加（''）；
$（'#tester2'）.css({
位置：'绝对'，
背景：'蓝色'，
宽度：10，
身高：10，
});
setInterval（函数（）{
var x=$（'#tester'）[0]。getBoundingClientRect（）；
$（“#测试仪位置”）.text（'top:'+x.top+'，left:'+x.left）；
$（'#tester2'）.css({
“顶部”：x.top/2，
“左”：（x.left/2）+x.width
});
}, 1000);
$（'#jquery version'）.text（'jquery version:'+$.fn.jquery）；
});
#测试仪{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：10px；
高度：10px；
背景：红色；
}
#页面{
最小高度：200px；
}
身体{
边框：2倍纯绿；
变换：缩放（1）平移（20px，40px）；
}
#测试员2{
变换：缩放（1）平移（0,0）；
}

返回红色测试仪上的getBoundingClientRect：
我有一个有效的答案，它可能不是最好的答案，但对我来说100%有效


$（文档）.ready（函数（）{
$（'body'）。追加（''）；
$（'#tester2'）.css({
位置：'绝对'，
背景：'蓝色'，
宽度：10，
身高：10，
});
setInterval（函数（）{
var x=$（'#tester'）[0]。getBoundingClientRect（）；
$（“#测试仪位置”）.text（'top:'+x.top+'，left:'+x.left）；
$（'#tester2'）.css({
“顶部”：x.top/2，
“左”：（x.left/2）+x.width
});
}, 1000);
$（'#jquery version'）.text（'jquery version:'+$.fn.jquery）；
});
#测试仪{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：10px；
高度：10px；
背景：红色；
}
#页面{
最小高度：200px；
}
身体{
边框：2倍纯绿；
变换：缩放（1）平移（20px，40px）；
}
#测试员2{
变换：缩放（1）平移（0,0）；
}

返回红色测试仪上的getBoundingClientRect：
您可以只取
偏移设置
和
偏移设置
，而不必担心变换，因为相同的变换也应用于新添加的div。我是从这个例子中猜出来的


$（文档）.ready（函数（）{
$（'body'）。追加（''）；
$（'#tester2'）.css({
位置：'绝对'，
背景：“蓝色”，
宽度：10，
身高：10，
不透明度：0.6
});
var tester=document.getElementById（'tester'）；
$（'#tester2'）.css({
顶部：tester.offsetTop-2，//2px主体边框
左：tester.offsetLeft-2
});
$（'#jquery version'）.text（'jquery version:'+$.fn.jquery）；
});
#测试仪{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：10px；
高度：10px；
背景：红色；
}
#页面{
最小高度：200px；
}
身体{
边框：2倍纯绿；
变换：缩放（1）平移（20px，40px）；
}

返回红色测试仪上的getBoundingClientRect：
您可以只取
偏移设置
和
偏移设置
，而不必担心变换，因为相同的变换也应用于新添加的div。我是从这个例子中猜出来的


$（文档）.ready（函数（）{
$（'body'）。追加（''）；
$（'#tester2'）.css({
位置：'绝对'，
背景：“蓝色”，
宽度：10，
身高：10，
不透明度：0.6
});
var tester=document.getElementById（'tester'）；
$（'#tester2'）.css({
顶部：tester.offsetTop-2，//2px主体边框
左：tester.offsetLeft-2
});
$（'#jquery version'）.text（'jquery version:'+$.fn.jquery）；
});
#测试仪{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：10px；
高度：10px；
背景：红色；
}
#页面{
最小高度：200px；
}
身体{
边框：2倍纯绿；
变换：缩放（1）平移（20px，40px）；
}

返回红色测试仪上的getBoundingClientRect：
能否将转换添加到x.top和x.left？那么（x.top+20）和（x.left+40）您不能将转换添加到x.top和x.left吗？所以（x.top+20）和（x.left+40），但如果测试仪位于另一个容器中，位置为：relative，该怎么办。offsetTop将是相对于它的，而不是我需要的整个主体。您可以将新的
div
作为兄弟添加到现有主体，而不是将其添加到主体，这样就可以使用相同的位置，并且它也将继承所有其他转换。但是，如果测试人员位于另一个容器中，并且位置为：relative，该怎么办呢。offsetTop将是相对于它的，而不是我需要的整个主体。您可以将新的
div
作为兄弟添加到现有的主体上，而不是将其添加到主体上，这样就可以使用相同的位置，并且它还将继承所有其他转换。