configuración de una cadena de estilo completa a un elemento de javascript (no parámetros de estilo individuales)

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 tengo que ser capaz de insertar una definición aleatoria estilo lleno de una plantilla

por ejemplo

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

¿Hay una manera de hacerlo en Javascript? Algo así como element.style = "all style definition here"; ?

Answer 1

¿Qué tal la propiedad .style.cssText? Here's Microsoft's explanation.

Throw que los estilos que desee aplicar esta manera:

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

En cuanto a soporte de los navegadores, aunque era IE-propietaria creo que es bien soportado (obras en el IES, FF3, y Safari 3.2 WIN al menos).

Answer 2

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

Hay a solution, pero no lo he intentado.

Answer 3

Si usted quiere que sea ligero, crear una función como:

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

allí tendría que pasar los estilos de como un objeto literal:

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

Tenga en cuenta que las referencias del estilo pasaron debe seguir el nombre desde el punto de vista de JavaScript, ya que la función simplemente cambia los estilos al acceder al objeto style del elemento a través de JavaScript.

Si debe tomar su entrada de estilo de una cadena, puede analizarla fácilmente y crear el objeto literal.