Javascript 创建HTML元素的像素完美自由浮动克隆 我一直在尝试在页面中间做一个按钮，有一个带有动画的克隆，然后把它作为一个浮动元素插入文档。这个想法是让一堆按钮的“克隆”动画围绕（对于一个愚蠢的项目，我正在工作）

我找到了一种克隆元素并保持原始位置的方法，即使用以下代码：

 var clone = original_elt.cloneNode(true);
 clone.id = 'jonny';
 
 let rect = original_elt.getBoundingClientRect();
 
 let padleft = parseFloat(window.getComputedStyle(original_elt, null).getPropertyValue('padding-left'));
 let padright = parseFloat(window.getComputedStyle(original_elt, null).getPropertyValue('padding-right'));
 let padtop = parseFloat(window.getComputedStyle(original_elt, null).getPropertyValue('padding-top'));
 let padbot = parseFloat(window.getComputedStyle(original_elt, null).getPropertyValue('padding-bot'));
 console.log("What is : " + padleft + " | " + padright + " :: " + padtop + " | " + padbot);
 
 original_elt.style.visibility = "hidden";
 
 clone.style.position = "absolute";
 clone.style.width = (rect.width - padleft - padright) + "px";
 clone.style.height = (rect.height - padtop - padbot) + "px";
 clone.style.top = (rect.y + window.scrollY - 2) + "px";
 clone.classList.add("outcircletransition");

可以看出，这似乎很简单。克隆节点，获取计算的样式填充，获取边界框并将其应用于克隆的元素

它在一些测试元素上起作用，但在其他测试元素上，我发现位置稍微向底部移动，等等。

clone.style.top

上的-2像素是我添加的东西，它以某种方式使事情更加完美，但我仍然不知道这2个像素是从哪里来的

---

也许我错过了一个更明显、更恰当的方法？我原以为

getBoundingClientRect（）

和填充物一起就足够了，但似乎少了一些东西，但它是什么呢？

有边框吗？嗯，原来是边距。不知怎么的，我忘了