setAttribute no funciona para el atributo 'estilo' en IE

Question

Estoy portando una parte del código JS escrito para Firefox en Internet Explorer. Me enfrenté al problema de cambiar el estilo de un elemento usando el método setAttribute que funcionaba en Firefox.

button.setAttribute('style', 'float: right;'); 

Intenté configurar el miembro del estilo del botón y tampoco funcionó. Esta fue la solución en caso de configurar el controlador de eventos onclick.

button.style = 'float: right;'; 

Primero quiero saber la solución para el problema anterior y
En segundo lugar hay ninguna listas mantenidas por estas diferencias entre los navegadores?

Answer 1

Porque el estilo en sí es un objeto. Lo que quiere es:

button.style.setAttribute('cssFloat','right'); 

Pero IE no es compatible con setAttribute para objetos de estilo. A fin de utilizar plenamente la cruz-navegador compatible:

button.style.cssFloat = 'right'; 

cuanto a la referencia, siempre voy a www.quirksmode.org. Específicamente: http://www.quirksmode.org/compatibility.html. Haga clic en todas las cosas relacionadas con DOM.

Y, por último, para establecer varios atributos que suelen utilizar algo como:

function setStyle(el,spec) { 
    for (var n in spec) { 
     el.style[n] = spec[n]; 
    } 
} 

uso:

setStyle(button,{ 
    cssFloat : 'right', 
    border : '2px solid black' 
}); 

Nota: object.attribute = 'value' aunque las obras en todos los navegadores no siempre pueden trabajar para que no sea HTML DOM objetos. Por ejemplo, si su documento contiene gráficos SVG incrustados que necesita manipular con javascript, necesita usar setAttribute para hacerlo.

Answer 2

getAttribute y setAttribute están rotos en Internet Explorer.

La sintaxis correcta de lo que está tratando de lograr es:

button.style.cssFloat = 'right'; 

La solución correcta al problema es más probable que sea:

button.className = 'a class that matches a pre-written CSS rule-set'; 

Answer 3

Noté que setAttribute funciona en IE sólo cuando el atributo aún no existe Por lo tanto, use el atributo eliminar y luego use el atributo set.

no he probado esto para los insectos, pero conceptualmente creo que esto va a funcionar:

NOTA - esto fue escrito a existir dentro de la propiedad objeto que había llamado 'elemento'.

//Set Property 

this.setProperty = function (a, b) { 
var c = this.element.getAttribute("style"); 
var d; 
if (!c) { 
    this.element.setAttribute("style", a + ":" + b); 
return; 
} else { 
    d = c.split(";") 
} 

for (var e = 0; e < d.length; e++) { 
    var f = d[e].split(":"); 
    if (f[0].toLowerCase().replace(/^\s+|\s+$/g, "").indexOf(a.toLowerCase().replace(/^\s+|\s+$/g, "")) == 0) { 
     d[e] = a + ":" + b 
    } 
} 

d[d.length] = a + ":" + b; 
this.element.setAttribute("style", d.join(";")) 
} 

//Remove Property 
this.removeProperty = function (a) { 
var b = this.element.getAttribute("style"); 
var c; 
if (!b) { 
    return 
} else { 
    c = b.split(";") 
} 

for (var d = 0; d < c.length; d++) { 
    var e = c[d].split(":"); 
    if (e[0].toLowerCase().replace(/^\s+|\s+$/g, "").indexOf(a.toLowerCase().replace(/^\s+|\s+$/g, "")) == 0) { 
     c[d] = "" 
    } 
} 

this.element.removeAttribute("style"); 
this.element.setAttribute("style", c.join(";").replace(";;", ";")) 
} 

Answer 4

Funciona en IE. Solo lo probé.

1. El método se pasa un nombre de estilo y un valor
2. El método comprueba entonces para ver si hay algún estilos Si no hay estilos de atributo existe, entonces el método se limita a establecer el estilo y se detiene
3. Si existe un atributo de estilo, todos los estilos en el atributo se dividen en una matriz
4. la matriz se itera y todas las definiciones de estilo aplicables se actualiza con el nuevo valor
5. el atributo de estilo se retira a continuación desde el elemento
6. El atributo de estilo se vuelve a añadir al elemento con sus valores ajustan a la nueva información obtenida de la matriz

Answer 5

Es necesario utilizar cssText

button.style.cssText = 'float: right;'; 

No