setAttribute no funciona para el atributo ‘estilo’ en IE

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

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

Intenté configurar el miembro de 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 alguna lista mantenida para estas diferencias entre los navegadores?

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

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

Pero IE no es compatible con setAttribute para objetos de estilo. Por lo tanto, use el navegador totalmente compatible compatible:

 button.style.cssFloat = 'right'; 

Como referencia, siempre voy a http://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 múltiples atributos usualmente utilizo 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 funcionan para objetos DOM que no son HTML. Por ejemplo, si su documento contiene gráficos SVG incrustados que necesita manipular con javascript, necesita usar setAttribute para hacerlo.

getAttribute y setAttribute están rotos en Internet Explorer.

La syntax correcta para lo que estás 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'; 

Necesitas usar cssText

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

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

No he probado esto para detectar errores, pero conceptualmente creo que esto funcionará:

NOTA : esto se escribió para existir dentro de un objeto que tenía una propiedad llamada ‘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(";;", ";")) } 

Funciona en IE. Solo lo probé.

  1. El método se pasa un nombre de estilo y un valor
  2. El método luego verifica si hay algún estilo. Si no existe ningún atributo de estilo, entonces el método simplemente establece 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 actualizan con el nuevo valor
  5. El atributo de estilo se elimina del elemento
  6. El atributo de estilo se agrega de nuevo al elemento con sus valores establecidos en la nueva información recostackda de la matriz