[英]plain javascript: overlay object
There is any object (could be an inline object like but also a block element like or ) as original object. 有任何对象(可以是嵌入式对象,但也可以是或的块元素)作为原始对象。
Now I try to set an overlay over this object, with the same position and size. 现在,我尝试在此对象上设置一个具有相同位置和大小的叠加层。
=> function overlayObject(originalObject)
=>
function overlayObject(originalObject)
Creating the new overlay and mirroring the size of the original object works well. 创建新的叠加层并镜像原始对象的大小效果很好。 I can also append this new element within the originalObject's parent node.
我还可以将此新元素附加到originalObject的父节点中。
Regarding the position, left+top for achieving the overlay, is still pending and failing. 关于位置,用于实现叠加的左上角仍处于挂起和失败状态。 With original objects that have position:absolute or position:fixed, it's easy, but how to get the exact left/top position to use the same with the overlay ?
对于具有position:absolute或position:fixed的原始对象,这很容易,但是如何获得确切的左/上位置以与叠加层一起使用呢?
You can use offsetTop
and offsetLeft
to determine the top and left distance of your element to the parent element: 您可以使用
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.