JavaScript和复制风格

Question

我正在使用javascript复制表格单元格.

它工作正常,只是它不复制样式.我想复制如下,但这不起作用.newCell.style = oldCell.style;

所以我认为对于我的text-align,我必须像这样复制它:newCell.style.textAlign = oldCell.style.textAlign;

这很有用,但每当我添加一个新的样式项时,我都要记得在这里注册它.

那么,我现在的问题是如何循环样式并复制那里的每一个项目？

使用chrome,我设法做到这样:

 var strAttribute = GetDomNameFromAttributeName(oRow.cells[1].style[0]);
    var styletocopy = eval('oRow.cells[1].style.'+strAttribute);
    eval("newCell.style."+strAttribute+"='"+styletocopy+"'"); // //newCell.style.textAlign='center';

但这不适用于IE.没有用FF测试它,但假设铬兼容性.

有没有办法循环IE中的样式元素？或者有没有更好的方法来复制所有样式元素？

Answer 1

eval('oRow.cells[1].style.'+strAttribute)

永远不要这样使用eval(*).在JavaScript中,您可以使用方括号访问其名称存储在字符串中的属性.object.plop与以下相同object['plop']:

to.style[name]= from.style[name];

(*:eval如果你能提供帮助,就永远不要使用.只有极少数非常特殊和罕见的场合你需要它.)

有没有办法循环样式元素

该style对象应该支持DOM Level 2 CSSCSSStyleDeclaration接口.你可以遍历规则并将它们应用到另一个元素,如下所示:

for (var i= from.style.length; i-->0;) {
    var name= from.style[i];
    to.style.setProperty(name,
        from.style.getPropertyValue(name),
        priority= from.style.getPropertyPriority(name)
    );
}

在IE？

不,IE不支持整个CSSStyleDeclaration接口,上面的内容不起作用.然而,有一种更简单的方法,不涉及循环,它将适用于IE和其他浏览器:

to.style.cssText= from.style.cssText;

就如此容易!IE并没有像它应该的那样保留CSS文本,但是区别对于简单的内联样式复制并不重要.

然而,正如Pikrass所说(+1),如果你要复制整个元素而不仅仅是样式,那么这cloneNode是迄今为止最优雅的方式.

Answer 2

您可以使用.cloneNode(true)复制包含其所有内容(包括属性)的DOM元素:

var clonedTr = document.getElementById('id').cloneNode(true);

然后clonedTr是tr #id的精确副本."true"表示您要复制元素的内容.