如何使用样式将 iframe 中的克隆节点复制到其父节点

How to copy a cloned node in an iframe to its parent with styles?

本文关键字：节点 复制 父节点 样式 何使用 iframe      更新时间：2023-09-26

我正在尝试克隆<iframe>中的<div>，并将克隆的div附加到父DOM中。 我将div 保留为启动display: none(在 iframe 中时(，并在父级中克隆它时使其可见。 这一切都工作正常，这里有一个最小的片段：

父级(上.html(：

<iframe src=foo.html></iframe>

iframe (foo.html(

<html>
<HEAD>
    <style>
        #myid {
            display: none;
        }
    </style>
</HEAD>
<body onload="onload()">
    <script>
    function onload() {
        var div = document.getElementById("myid");
        var newdiv = div.cloneNode(true);
        var body = parent.document.getElementsByTagName("body")[0];
        newdiv.id = "new" + div.id;
        newdiv.style.display = "block";
        newdiv.style.position = "absolute";
        newdiv.style.top = "100px";
        newdiv.style.left = "100px";
        newdiv.style.width = "100px";
        newdiv.style.height = "100px";
        newdiv.style.background = "red";
        body.appendChild(newdiv);
    };
    </script>
    <div id=myid>
        <p>foo
    </div>
</body></html>

我想使用内部 css 来定义#myiddiv 何时克隆到父级的问题。 但是，一旦div 被克隆，它只引用父级中的 CSS...... 我(很容易(无法修改父级的 CSS。

我可以在克隆时让内部 CSS "粘"到div 上吗？

例如，如果我删除上面的行：

newdiv.style.background = "red";

而是添加到内部 CSS 中：

background: red;

一旦我将div 克隆到父级，红色就不会保留。

我唯一的其他解决方案是通过更改div 来内联完成所有操作，例如：

<div id=myid style="background: red;">

这行得通，只是我有很多 CSS，保持这种方式是一团糟。

我对此的解决方案(根据@charlietfl的建议(是添加：

newdiv.style.cssText = window.getComputedStyle(div).cssText;

将计算的 CSS 复制到克隆的div。 现在我可以将background: red添加到内部 CSS 中，它被"卡"到克隆中。

最终解决方案如下：

<html>
<HEAD>
    <style>
        #myid {
            /* Added style here */
            background: red;
            display: none;
        }
    </style>
</HEAD>
<body onload="onload()">
    <script>
    function onload() {
        var div = document.getElementById("myid");
        var newdiv = div.cloneNode(true);
        var body = parent.document.getElementsByTagName("body")[0];
        /* Copy styles here */
        newdiv.style.cssText = window.getComputedStyle(div).cssText;
        newdiv.id = "new" + div.id;
        newdiv.style.display = "block";
        newdiv.style.position = "absolute";
        newdiv.style.top = "100px";
        newdiv.style.left = "100px";
        newdiv.style.width = "100px";
        newdiv.style.height = "100px";
        body.appendChild(newdiv);
    };
    </script>
    <div id=myid>
        <p>foo
    </div>
</body></html>
相关文章：