我正在尝试克隆 <div>在<iframe> ，并将克隆的 div 附加到父 DOM。我将 div 保留为 display: none开始(当在 iframe 中时)，当我在父级中克隆它时，我让它可见。这一切都很好，这是一个最小的片段:
父级(top.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 来定义 #myid 的问题当 DIV 被克隆到父级时。但是，一旦 div 被克隆，它只会引用父级中的 CSS...我不能(轻易地)修改父级的 CSS。
当 div 被克隆时，我能否使内部 CSS“粘附”到它？
例如，如果我删除上面的行:
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>
关于javascript - 如何使用样式将 iframe 中的克隆节点复制到其父节点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35420669/