javascript - 纯javascript：覆盖对象

Question

有任何对象（可以是内联对象，也可以是块元素，例如 or ）作为原始对象。

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

=>function overlayObject(originalObject)

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

关于位置，用于实现覆盖的 left+top 仍然是未决和失败的。对于具有 position:absolute 或 position:fixed 的原始对象，这很容易，但是如何获得与叠加层相同的确切左/上位置？

Answer 1

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

小提琴

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);
}