Cómo puedo copiar mediante programación todos los atributos de estilo de un elemento DOM a otro

Tengo una página con dos marcos, y necesito (mediante javascript) copiar un elemento y todos sus elementos anidados (es un ul/li árbol) y lo más importante es el estilo de un cuadro a otro.Cómo puedo copiar mediante programación todos los atributos de estilo de un elemento DOM a otro

Obtengo todo el contenido mediante la asignación de innerhtml, y puedo ubicar el nuevo elemento en el segundo marco con dest.style.left y dest.style.top y funciona. Pero estoy tratando de obtener toda la información de estilo y nada está sucediendo.

Estoy usando getComputedStyle para obtener el estilo final para cada elemento de origen cuando recorro cada nodo y los asigno a la misma posición en la lista de nodos de destino y no ocurre nada para cambiar visualmente el estilo.

¿Qué me estoy perdiendo?

Fuente

2010-04-26 stu

Casi un duplicado de [Duplicar un elemento (y su estilo) con JavaScript] (http://stackoverflow.com/questions/1848445/duplicating-an-element-and-its-style-with-javascript) –

'Object.assign (el.style, otherEl.style)' – caub

¿Has probado cloneNode? Puede copiar el elemento y todos sus hijos de una sola vez. http://www.w3schools.com/dom/met_element_clonenode.asp

Fuente

2010-04-26 17:46:04

Si necesita transferirlo como una cadena, debería poder usar JSON. En realidad, esto puede ser más pequeño que tratar de transferir el estilo calculado, y debería funcionar correctamente si el CSS apropiado está disponible en ambos contextos. –

+1 - 'cloneNode' podría no copiar todo el estilo si los selectores de ID (' #myFrame {} ') u otros selectores aplicaran estilos que no se aplicarían al nuevo nodo, pero esto debería ser perfecto si ese no es el caso aquí. –

Debí haber perdido esa parte del documento que esperaba tener que hacerlo yo mismo, pero desafortunadamente no está funcionando, lo que me lleva a creer que algo está mal. Tengo la sensación de que hay algunos matices que van de un cuadro a otro. ¿Clonaría necesariamente los estilos heredados de los nodos principales al que estoy clonando? – stu

Con getComputedStyle, se puede obtener la propiedad cssText para que se capturen todo el estilo computado en una cadena de CSS:

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

Desafortunadamente, getComputedStyle no es compatible con Internet Explorer, que utiliza currentStyle lugar. Doblemente desafortunado es el hecho de que currentStyle devuelve nulo para cssText, por lo que el mismo método no se puede aplicar a IE. Voy a tratar de ocurrirá algo para usted, si nadie me pega a él :-)

pensaba en ello y se podía emular lo anterior en IE usando una declaración for...in:

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;

Fuente

2010-04-26 17:39:55

intentando esto ahora ya que el clon no funciona para mí. getcomputedstyle() requiere dos parámetros para cualquiera que esté siguiendo mis tribulaciones ... se actualizará pronto. – stu

Debo estar volviéndome loco. He pasado todo el día golpeando mi cabeza contra esto y no he llegado a ninguna parte.Estoy dando un paso adelante con Firebug y tengo una función recursiva que sigue a cada nodechild y llama a getcomputedstyle y firebug devuelve unaCSSStyleDeclaration calculada con 162 claves, pero sin ajustes de valor, así que cuando llamo .cssText no obtengo nada. Pero cuando miro los elementos con firebug, IT puede obtener toda la información de estilo computed. GAAAAAAAAAHHHHHHH !!!!!!!!!! – stu

Quizás me esté perdiendo algo obvio. ¿Getcomputedstyle() ignora las cosas definidas en las etiquetas de estilo CSS? Ahí es donde se define todo el estilo del que intento copiar. Voy a tratar de poner el estilo en las etiquetas en sí ... – stu

Bueno, me di por vencido la táctica original de tratar de obtener la información de estilo [calculado] de la etiqueta fuente, nunca lo hice funcionar.

Así que en lugar yo probamos este, y lo hizo el trabajo ...

En primer lugar me agarró la etiqueta -style- del marco fuente, entonces yo appendChilded al final de la etiqueta de la segunda -head- marco. Para que esto resultó útil ... How do you copy an inline style element in IE?

Entonces hice unos elementos div anidados, teniendo cada uno un ID de clase o estilo que necesitaba para heredar para que la jerarquía se correspondía con la primera trama. Luego empujé el innerhtml de la etiqueta del marco de origen que quería copiar y luego finalmente lo agregué al cuerpo del segundo marco, y mágicamente, funcionó.

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); // voila

Fuente

2010-04-26 21:05:14 stu

Cómo puedo copiar mediante programación todos los atributos de estilo de un elemento DOM a otro

Respuesta

Cuestiones relacionadas