¿Hay alguna manera de aplicar estilos CSS múltiples en un lote para evitar múltiples reflujos?

Question

Sé que alterar el estilo de los elementos directamente a través de JavaScript provocará un reflujo. Sin embargo, me preguntaba si es posible alterar múltiples valores de estilo en un lote con solo un reflujo.

Answer 1

No directamente, pero hay algunas buenas sugerencias acerca de cómo minimizar el impacto de los reflujos aquí:

http://dev.opera.com/articles/view/efficient-javascript/?page=3

En resumen, intentar algo como esto:

El segundo método consiste en definir una nuevo atributo de estilo para el elemento, en lugar de asignar estilos uno por uno. La mayoría de las veces esto es adecuado para cambios dinámicos como animaciones, donde los nuevos estilos no se pueden conocer con antelación. Esto se hace usando la propiedad cssText del objeto de estilo , o usando setAttribute. Internet Explorer no permite la segunda versión , y necesita la primera. Algunos navegadores más antiguos, incluido Opera 8, necesitan el segundo enfoque, y no entienden el primero. Por lo tanto, la forma fácil es comprobar si la primera versión es es compatible y usarla, luego caer de nuevo a la segunda si no.

var posElem = document.getElementById('animation'); 
var newStyle = 'background: ' + newBack + ';' + 
    'color: ' + newColor + ';' + 
    'border: ' + newBorder + ';'; 
if(typeof(posElem.style.cssText) != 'undefined') { 
    posElem.style.cssText = newStyle; // Use += to preserve existing styles 
} else { 
    posElem.setAttribute('style',newStyle); 
} 

Answer 2

Si estaba utilizando jQuery, que tiene una función .css que le permite añadir estilo a la vez múltiple:

$ ('element').css({'color':'red', 'border':'#555 solid thin'});

Answer 3

Se puede poner todos los estilos en un CSS clase

.foo { background:#000; color:#fff; ... } 

y después asignarlo a la propiedad className

// javascript 
var your_node = document.getElementById('node_id'); 
your_node.className = 'foo' 

que deben dar lugar a sólo un repinte/reflujo

Answer 4

También podemos establecer la visibilidad del elemento de 'oculto', a continuación, aplicar los estilos y luego hacerla visible de nuevo.

Answer 5

uso:

document.getElementById('elemnt_ID').setAttribute('style','color:white; margin:5px;');