Question

我有一个包含两个框架的页面，我需要（通过javascript）复制一个元素及其所有嵌套元素（它是一个ul / li树），最重要的是它是从一个框架到另一个框架的样式。“ p>

我通过分配innerhtml获得所有内容，并且我能够使用dest.style.left和dest.style.top将新元素放在第二帧中，并且它可以正常工作。但是我正在尝试获取所有样式信息而且没有发生任何事情。

我正在使用getComputedStyle来获取每个源元素的最终样式，因为我遍历每个节点然后将它们分配到目标节点列表中的相同位置，没有任何东西可以直观地改变样式。

我错过了什么？

Answer 1

使用getComputedStyle，您可以获取cssText属性，该属性将在CSS字符串中获取整个计算样式：

var completeStyle = window.getComputedStyle(element1, null).cssText;
element2.style.cssText = completeStyle;

不幸的是，Internet Explorer不支持getComputedStyle，而是使用currentStyle。令人遗憾的是，currentStyle为cssText返回null，因此同样的方法无法应用于IE。如果没有人打败我，我会试着为你找出一些东西:-)

我考虑过它，您可以使用for...in语句在IE中模拟上述内容：

var completeStyle = "";
if ("getComputedStyle" in window)
    completeStyle = window.getComputedStyle(element1, null).cssText;
else
{
    var elStyle = element1.currentStyle;
    for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; }
}

element2.style.cssText = completeStyle;

Answer 2

你试过cloneNode吗？它可以一举复制元素及其所有子元素。 http://www.w3schools.com/dom/met_element_clonenode.asp

Answer 3

好吧，我放弃了尝试从源标签中获取[计算]样式信息的原始方法，我从来没有让它工作。

所以我尝试了这个，它确实有效......

首先，我从源帧中抓取-style-tag，然后将其追加到第二帧的-head-tag的末尾。这被证明是有用的...... How do you copy an inline style element in IE?

然后我创建了一些嵌套的div元素，每个元素都有一个我需要继承的id或style类，以便层次结构与第一帧匹配。然后我推动了我想要复制的源框架标签的innerhtml，然后最终将它添加到第二帧的主体上，神奇地说，这一切都有效。

var topd = doc.createElement('div'); // make a div that we can attach all our styles to so they'll be inherited
topd.id = 'menuanchorelement';
// shove our desired tag in the middle of a few nested elements that have all the classes we need to inherit...
topd.innerHTML = "<div id='multi-level'><ul class='menu'>" + dh.innerHTML + "</ul></div>";

doc.body.appendChild（topd）; //瞧

如何以编程方式将所有样式属性从一个DOM元素复制到另一个DOM元素

3 个答案: