Existe-t-il un moyen d'appliquer plusieurs styles CSS dans un lot pour éviter plusieurs ré-encaissements?

Question

Je sais que modifier le style de l'élément via JavaScript provoquera directement une refusion. Cependant, je me demandais s'il est possible de modifier plusieurs valeurs de style dans un lot avec une seule refusion?

Answer 1

Pas directement, mais il y a quelques bonnes suggestions visant à minimiser l'impact des remboursements ici:

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

En bref, essayer quelque chose comme ceci:

La deuxième approche consiste à définir une nouvel attribut de style pour l'élément, au lieu d'affecter les styles un par un. Le plus souvent cela est adapté aux changements dynamiques tels que les animations, où les nouveaux styles ne peuvent pas être connus à l'avance. Ceci est fait en utilisant soit la propriété cssText de l'objet style , soit en utilisant setAttribute. Internet Explorer n'autorise pas la deuxième version et nécessite le premier. Certains navigateurs plus anciens, y compris Opera 8, ont besoin de la deuxième approche, et ne comprennent pas le premier. Donc, le moyen facile est de vérifier si la première version est pris en charge et l'utiliser, puis tomber retour à la seconde sinon.

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 vous utilisez jQuery, il a une fonction de Css qui vous permet d'ajouter du style plusieurs à la fois:

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

Answer 3

Vous pouvez mettre tous les styles dans un CSS classe

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

puis l'affecter à la propriété className

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

qui devrait déclencher une seule repeindre/refusion

Answer 4

Vous pouvez définir la visibilité de l'élément « caché », puis appliquer les styles et le rendre visible à nouveau.

Answer 5

utilisation:

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