普通javascript：覆盖对象

Question

有任何对象（可以是内联对象，但也可以是像或的块元素）作为原始对象。

现在我尝试在这个对象上设置一个覆盖，位置和大小相同。

=＆GT; function overlayObject(originalObject)

创建新叠加层并镜像原始对象的大小效果很好。我还可以在originalObject的父节点中附加这个新元素。

关于位置，左侧+顶部用于实现叠加，仍处于待定状态且失败。对于具有位置：绝对位置或位置：固定的原始对象，它很容易，但如何获得精确的左/上位置以使用与叠加层相同的位置？

Answer 1

您可以使用offsetTop和offsetLeft来确定元素与父元素的顶部和左侧距离：

Fiddle

function createOverlay(el) {
    var t = el.offsetTop;
    var l = el.offsetLeft;
    var newEl = el.cloneNode(true);
    newEl.style.margin = "0";
    newEl.style.position = "absolute";
    newEl.style.left = l + "px";
    newEl.style.top = t + "px";
    newEl.style.backgroundColor = "rgba(0,0,255,0.3)";
    el.offestParent.appendChild(newEl);
}