Establecer una cadena de estilo completa en un elemento de JavaScript (no parámetros de estilo individual)

Question

Necesito establecer un estilo arbitrario en un tramo a través de JavaScript.

Sé que puedo hacer cosas como: span.style.height="250px"; Pero necesito poder insertar una definición de estilo completo aleatorio de una plantilla

por ejemplo

float:left; 
text-decoration:underline; 
cursor:pointer; 
color:blue;

¿Hay alguna manera de hacer eso en JavaScript? Algo como:

element.style="all style definition here";

Answer 1

¿Qué tal la propiedad .style.csstext? Aquí está la explicación de Microsoft.

Tíralos los estilos que te gustaría aplicar así:

document.getElementById('myEl').style.cssText = 'float:left;margin-top:75px;';

En cuanto al apoyo del navegador, aunque era IE-propietary, creo que está bien respaldado (funciona al menos en el IES, FF3 y Safari 3.2).

Answer 2

Si desea que sea liviano, cree una función como:

function setStyles(element, styles)
{
    for(var s in styles) {
        element.style[s] = styles[s];
    }
}

Entonces pasarías los estilos como un objeto literal:

setStyles(element, {float: "left",
                    textDecoration: "underline",
                    cursor: "pointer",
                    color: "blue"});

Tenga en cuenta que las referencias de estilo pasadas tienen que seguir el nombre desde un punto de vista de JavaScript, ya que la función simplemente cambia los estilos accediendo a los elementos style Objeto a través de JavaScript.

Si debe tomar su entrada de estilo de una cadena, entonces podría analizarla y crear el objeto literal.

Answer 3

Hay element.setAttribute('style', '...');, pero falla en IE.

Hay una solución, pero no lo he intentado.