普通的javascript：覆蓋對象

Question

有任何對象（可以是嵌入式對象，但也可以是或的塊元素）作為原始對象。

現在，我嘗試在此對象上設置一個具有相同位置和大小的疊加層。

=> function overlayObject(originalObject)

創建新的疊加層並鏡像原始對象的大小效果很好。 我還可以將此新元素附加到originalObject的父節點中。

關於位置，用於實現疊加的左上角仍處於掛起和失敗狀態。 對於具有position：absolute或position：fixed的原始對象，這很容易，但是如何獲得確切的左/上位置以與疊加層一起使用呢？

Answer 1

您可以使用offsetTop和offsetLeft確定元素到父元素的頂部和左側距離：

小提琴

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