Styles en IE

[jeybi]

Buenas, vengo con un problema:

Estoy creando un efecto en javascript que dibuja el elemento con cierta ID de forma animada, y necesito copiar todos los atributos de este elemento a otro (si necesitan saber por que se los explico).

El punto es que firefox me deja hacer esto:

Código javascript:

for (i=0;i<id.attributes.length;i++){
            if (id.attributes[i].specified){
                otroelemento.setAttribute(id.attributes[i].nodeName,id.attributes[i].value);
            }
        }
 

Esto me copia todos los atributos de un elemento a otro, incluido el atributo style, junto con todos sus estilos. En IE, al intentar recojer el valor de style, simplemente devuelve NULL.

Por mas que intento no logro una forma de copiar todos los estios de un elemento a otro:

Intento1:

Código javascript:

var iestyle =id.getAttribute('style')
        alert('ready');
        for(k in iestyle){
            spaceholder.style[k] = id.style[k];
        }
        alert('ready2');
        }
 

La pregunta concreta es, ¿ como recojer los estilos de un elemento y pasarlos a otro en Ie ?

[caricatos]

Hola:

Prueba así:

Código:

      var iestyle =id.style;
      for(k in iestyle)
         spaceholder.style[k] = id.style[k];

Saludos

[jeybi]

Me marca este error: (ie)

Invalid argument
Line: 51

No podria ser menos descriptivo...

Bueno en fin, aqui dejo el codigo completo, el codigo que intento debugear se comprende desde la linea 47 a la 51:

Código javascript:

function fade(id,tiempo,ancho,alto){
    //Validamos argumentos de la funcion
    id = typeof id == 'string'? document.getElementById(id):id;        //Obtenemos el elemento
    ancho = typeof ancho == 'number'? ancho:id.offsetWidth;            //Si no se espeficia el ancho, usamos el del elemento actual
    alto = typeof alto == 'number'? alto:id.offsetHeight;        //Si no se especifica el alto, usamos el del elemento actual
    
    //Declaramos nuestras variables
    var tiemporef = ((tiempo*1000)-((tiempo*1000)*0.1));                               //El tiempo que tenemos disponible
    var altoPlus = ((alto*0.9)/(((alto*0.9) * tiemporef) / ((alto*0.9)+ancho)))*10;   //Alto a aumentar en cada intervalo
    var anchoPlus = (ancho/((ancho * tiemporef) / ((alto*0.9)+ancho)))*10;  //Ancho a aumentar en cada intervalo
            
    var anchoActual = 1;  //Ancho actual en todo momento
    var altoActual = 1;   //Alto actual en todo momento
    var opac = 0; //Opacidad en todo momento
    
    var horFade;  //Intervalo Horizontal
    var verFade; //Intervalo Vertical    
    var textFade; //Intervalo de texto
    
    var maxalto = alto*0.2; //Variaciones del alto
    var maxaumento = maxalto/((tiempo*1000)*0.1)*10;   //Aumento en el primer round
    
    var posicion = id.style.position;  //Guardamos la posicion
    var izq = id.style.left //Guardamos left atributo
    var arr = id.style.top //Guardamos top atributo
    
    var xpos = id.offsetLeft+(ancho/2);  //Posicion nueva
    var ypos = id.offsetTop+(alto/2);  //Posicion nueva
    
    var div = document.createElement('div'); //Creamos contenedor 
 
    div.innerHTML = id.innerHTML;   //Le asignamos el contenido del elemento actual a nuestro contendor
    id.innerHTML = '';           //Borramos el contenido de nuestro elemento actual
    
    
    //Si tiene otro tipo de posicionamiento, creamos un pace holder
    if(posicion != 'absolute'){
        var spaceholder = document.createElement(id.tagName);  //Space-holder    
                
        for (i=0;i<id.attributes.length;i++){
            if (id.attributes[i].specified){
                spaceholder.setAttribute(id.attributes[i].nodeName,id.attributes[i].value);
            }
        }
        
        //IE Styles
        if(!id.getAttributeNode('style').nodeValue){
            var iestyle = id.style;
            for(k in iestyle)
                spaceholder.style[k] = id.style[k];            
        }
        
        //Suprimimos cualquier background
        spaceholder.style.background = 'none';
        
        //Insertamos el spaceholder
        id.parentNode.insertBefore(spaceholder,id);
    }
    
    
    //Nuevos estilos al elemento
    id.style.position = 'absolute';       //Sobreponemos este elemento al spaceholder, si existe
    id.style.height = '1px';             //Inicia con un 1px al cuadrado
    id.style.width = '1px';
    id.style.left = xpos+'px';           //Le damos posicion 
    id.style.top = xpos+'px';            
    id.style.display = 'block';          //Lo hacemos visible            
    
    
    verFade= setInterval('fade.verFadeIt('+maxalto+','+maxaumento +')',10);   //Iniciamos cadena de intervalos
    
    
        //Se encarga de la anchura
    fade.horFadeIt= function(anchoaumento){
        if(anchoActual+anchoaumento <= ancho){
            id.style.width = (anchoActual+=anchoaumento)+'px';
            if(xpos > 0)
                id.style.left = (xpos-=anchoaumento/2) +'px';
        }
        else{
            id.style.width = (anchoActual=ancho)+'px';
            clearInterval(horFade);    
            verFade= setInterval('fade.verFadeIt('+alto+','+altoPlus+')',10);
        }
    }    
        
        //Se encarga de la altura
    fade.verFadeIt = function(alturaMax,aumento){
        if(altoActual+aumento <= alturaMax){
            id.style.height = (altoActual+=aumento)+'px';
            if(ypos > 0)
                id.style.top = (ypos-=aumento/2) +'px';
        }
        else {
            id.style.height = (altoActual=alturaMax)+'px';
            id.style.top = Math.round(ypos);
            clearInterval(verFade);
            if(anchoActual != ancho){
                horFade= setInterval('fade.horFadeIt('+anchoPlus+')',10);
            }
            else if(altoActual == alto){     //Llegando aqui hemos termiando la animacion, procedemos con el texto
                if(spaceholder)    id.parentNode.removeChild(spaceholder)  //Eliminamos el space holder, si existe
                id.style.position = posicion;  //Reposicionamos
                id.style.left = izq;
                id.style.top = arr;
                div.style.opacity = 0;          //Opacidad de nuestro contenido a cero
                div.style.zoom = 1; //IE HasLayout
                div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
                id.appendChild(div);            //Insertamos contenido
                textFade = setInterval(fade.textFadeIt,tiempo*10);
            }
        }
    }
    
    fade.textFadeIt = function(){
        if(opac < 1){
            div.style.opacity = (opac+=0.01);
            div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity='"+((opac+=0.01)*100)+")";
        }
        else{
            clearInterval(textFade);
        }
    }
    
}
 

Lineas 47 - 51:

Código javascript:

if(!id.getAttributeNode('style').nodeValue){
            var iestyle = id.style;
            for(k in iestyle)
                spaceholder.style[k] = id.style[k];            
        }
 

El HTML que uso (es solo como prueba):

Código HTML:

<html>
<head>    
    <script type="text/javascript" src="Log2.js"></script>
</head>
<body>
<input type="button" onclick="fade(document.getElementById('id1'),2)" value="Fade!" />
<div>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </div>
<div id="id1" style=" height:200px; background:blue; position:relative; bottom:10px; overflow:hidden"  >
<form method="aa" style="background:red; width:400px">
    <input type="text"  />
    <input type="radio" />
</form>
<div style="overflow:hidden"><img src="chapter06/example07/images/teacup05.jpg"  style="float:left"/>TFDGFDGFDGFDGFDG DGF DG FD FDGFDGFG FGFG FG FGF GFGFGG FGFGFGF GDHGFH FG
</div>
<div>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </div>
</body>
</html> 

Bueno gracias de todos modos, sigo buscando en el MSDN pero nada aun.

Saludos

[caricatos]

Hola:

Es que los atributos y los estilos se pueden recorrer con los arrays asociativos sin ningún problema... fíjate en esta página: Nuevo destripador... tal vez no esté bien creado el otro objeto... o debas incrustarlo en el documento para poder asignar estilos

Saludos

[jeybi]

Gracias, ya lo solucione, enves de crear desde la nada un nuevo elemento, use cloneNode() y todo listo.

Gracias de todas formas!