JavaScript & copiar estilo

Question

Estoy copiando una celda de tabla con javascript.

Funciona bien, solo que no copia el estilo. Quería copiar como a continuación, pero eso no funcionó. newCell.style = oldCell.style;

Así que pensé que para mi texto-alinear, tengo que copiarlo así: newCell.style.textAlign = oldCell.style.textAlign;

Eso funcionó, pero cada vez que agrego un nuevo elemento de estilo, tengo que recordar registrarlo aquí.

Entonces, mi problema ahora es ¿cómo puedo recorrer el estilo y copiar cada elemento allí?

con Chrome, me las arreglé para hacerlo de esta manera:

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'; 

Pero eso no funciona con IE. No lo he probado con FF, pero supongo que es compatible con Chrome.

¿Hay alguna forma de recorrer los elementos de estilo en IE? ¿O hay alguna forma mejor de copiar todos los elementos de estilo?

Answer 1

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

Nunca use eval como este (*). En JavaScript puede acceder a una propiedad cuyo nombre está almacenado en una cadena usando corchetes. object.plop es lo mismo que object['plop']:

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

(*:.. Nunca utilice eval en absoluto si usted puede ayudar a que sólo hay unas pocas ocasiones muy puntuales y poco frecuentes que lo necesite)

Es hay alguna forma de bucle sobre los elementos de estilo

el objeto style debe apoyar la interfaz de DOM Level 2 CSS CSSStyleDeclaration. Se podría bucle sobre las reglas y aplicarlas a otro elemento de la siguiente manera:

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) 
    ); 
} 

en IE?

No, IE no es compatible con toda la interfaz CSSStyleDeclaration y lo anterior no funcionará. Sin embargo, hay una manera más sencilla que no implican un bucle que se trabajo en IE y otros navegadores también:

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

Tan simple como eso! IE no conserva el texto CSS como debería, pero la diferencia no es importante para el copiado estilo en línea simple.

Sin embargo, como se dijo Pikrass (1), si está copiando un elemento de conjunto y no sólo los estilos, cloneNode es, con mucho, la forma más elegante de hacer eso.

Answer 2

puede copiar un elemento DOM con todo su contenido (incluyendo atributos) con .cloneNode (verdadero):

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

Entonces clonedTr es una copia exacta de la tr #id. El "verdadero" significa que quiere copiar el contenido del elemento.