Repinta rápidamente una matriz de símbolos Unicode en JavaScript

Question

Quiero cambiar el color de fondo/primer plano de muchos símbolos con la misma clase de CSS. En este momento lo estoy haciendo con jQuery — como $('back_COLORED').css('background-color', '#00FF00'), pero este enfoque es lento cuando hay muchos elementos con dicha clase (> 900).

Parece que es porque jQuery no cambia las reglas de CSS en sí, pero encuentra todos los elementos uno a uno y les aplica estilos en línea. Al menos, esto es lo que veo en el inspector. Entonces, la pregunta es:

• ¿Cómo puedo cambiar las reglas de CSS?
• ¿Será mucho más rápido?
• ¿Puedo hacerlo entre navegadores (IE6 no cuenta)?

UPD: Estoy tratando de hacer algún tipo de editor de esquema de colores. La fuente está en http://github.com/kurokikaze/cinnabar/. No importa las cosas de PHP, el editor es completamente del lado del cliente (con solo algunas bibliotecas extraídas de la red).

UPD2: Acercamiento del lienzo probado, todavía lento. La rama de Canvas está en http://github.com/kurokikaze/cinnabar/tree/canvas.

Answer 1

Si puede seleccionar el div principal por id, ¿tal vez podría seleccionar por etiqueta dentro de él? ¿O hay elementos del mismo tipo que deberían cambiar el color y que no deberían, dentro del padre?

Sería bueno tener una idea de lo que estás construyendo aquí. Más de 900 objetos parecen ser muchos ... ¿tal vez podría usarse un enfoque completamente diferente? Canvas, SVG?

Answer 2

Existen diferentes formas dependiendo del navegador con el que se encuentre. Esto es documented on Quirks Mode.

Algunas bibliotecas proporcionan una capa de abstracción, como YUI's StyleSheet utility.

Debe haber un impulso significativo en el rendimiento ya que no está utilizando JS/DOM para recorrer todos los elementos.

Otro enfoque sería predefinir sus estilos:

body.foo .myElements { … } 

Y luego editar document.body.className

Answer 3

Creo que una solución mejor sería escribir una regla CSS más específica (como para compensar las que el color normal) que se puede activar simplemente cambiando la clase css de un elemento.

Así, por ejemplo, si tiene el siguiente código estructural:

<div id="container"> 
    <span class="colored">Test 1</span> 
    <span class="colored">Test 2</span> 
</div> 

y CSS: -

.colored { background-color: red; } 
.newcolor .colored { background-color: blue; } 

Luego, en su jQuery agregar la clase .newcolor al contenedor div: -

$('#container').addClass('.newcolor'); 

Cuando lo haga, la segunda regla de CSS anulará la primera porque es más específica.

Answer 4

Me gustaría intentar cambiar una propiedad de CSS, en lugar de analizar el DOM.
Se trata del motor CSS vs. DOM + JS aquí, y el ganador es claro.

Sucede acabo de subir una pequeña biblioteca que reemplaza CSS Javascript: jstyle

Esto es puede ser una exageración, pero se puede encontrar en el código fuente de jstyle.js todo el código que necesita para actualizar cruz navegue por las propiedades CSS de su página.

Answer 5

La forma más fácil de utilizar varios navegadores para anular una definición de clase es escribir una nueva regla y agregarla al final de la última hoja de estilo en el documento. Usted puede editar una regla de estilo existente, pero incluso algunos navegadores recientes pueden dificultarla.

function newRule(selector, csstext){ 
var SS= document.styleSheets, S= SS[SS.length-1]; 
// this example assumes at least one style or link element 
if(S.rules){ 
    S.addRule(selector,csstext,S.rules.length); 
} 
else if(S.cssRules){ 
    S.insertRule(selector+'{'+csstext+'}'),S.cssRules.length) 
} 
} 

newRule('.someclass','background-color:#0f0'); 

Puedes agregar tantos 'propiedad: valor;' bits en el csstext que necesites. Recuerde agregar un '.' a un nombre de clase o un '#' a un id, y el CSS debe escribirse como una regla de estilo (con guiones, no camelCase).

Por supuesto, no anulará los estilos en línea, y es excesivo para pequeños cambios locales. También puede hacer que el rediseño de la página sea más obvio que cambiar un elemento a la vez, pero puede ser justo lo que necesita aquí.

Answer 6

Intente ocultar los elementos que desea cambiar antes de cambiarlos, realice el cambio y luego muéstrelos de nuevo. Esta es una práctica común para acelerar las cosas a medida que minimiza los eventos de repintado en la ventana gráfica. En este caso, cuando solo configuras una propiedad CSS, puede que no sea una ventaja, pero vale la pena intentarlo, digo.

Probar:

$('back_COLORED').hide(); 
$('back_COLORED').css('background-color', '#00FF00'); 
$('back_COLORED').show(); 

o

$('back_COLORED').hide().css('background-color', '#00FF00').show(); 

Answer 7

inyectar el código CSS en una etiqueta style:

var style = $('style').attr({ 
    type:"text/css", 
    media:"screen", 
    id:'changeStyle' 
}).html('.tempClass { color:red } .tempClass p { background:blue }').prependTo('body'); 

y en cada cambio en su color con el selector de color sólo reescritura el html dentro de la etiqueta #changeStyle.

No tengo idea de si funciona (no ha sido probado) pero deberías intentarlo.

Answer 8

Esto es jQuery Pluggin para el trabajo con las reglas CSS: http://flesler.blogspot.com/2007/11/jqueryrule.html

no está seguro acerca de su rendimiento, pero vale la pena intentarlo.