¿Cómo puedo detectar cuándo cambia la clase de un elemento HTML?

<div class="current"></div> 
<a href="#">text</a>

¿Cómo puedo detectar cuándo p. Ej. una clase .live se agrega a este <div> y hacer algo cuando sucedió?¿Cómo puedo detectar cuándo cambia la clase de un elemento HTML?

Por ejemplo, si se cambia la clase, oculte el enlace.

Tengo un script modificado que realiza cambios en la clase <div>. Es demasiado grande para mí encontrar el lugar donde sucede, así que estoy buscando la manera de detectar el cambio de clase.

Fuente

2011-05-17 James

¿qué bloque? '.corrent'? – Neal

Una forma trivial es simplemente verificar cada milisegundos por diferencia usando 'setInterval'. – pimvdb

Existen eventos DOM, pero están lejos de ser perfectos y no están disponibles en la mayoría de los navegadores. En otras palabras: No es posible (confiablemente). Hay hacks como intervalos y verificando en cada iteración, pero si necesita hacer algo como esto, su diseño probablemente esté atornillado. Tenga en cuenta que tales cosas serán lentas y que siempre habrá un retraso. Cuanto menor es el retraso, más lenta es la aplicación. No hagas eso.

Fuente

2011-05-17 16:46:12 jwueller

No lo recuerdo bien, pero veo un artículo sobre Mozilla Dev Central que advirtió sobre el uso de estos eventos (principalmente problemas de rendimiento). – sitifensys

Esto NO es cierto, es posible y confiable, solo requiere que escuche todos los eventos DOM y los filtre. En su caso, escuche específicamente los niños del cuerpo $ (documento) .on ("EVENTO", "cuerpo *", función()); Será una operación costosa, así que desaconsejaría, pero definitivamente posible y confiable –

@TobiasHagenbeek: ¿Qué evento estarías escuchando para detectar cambios de atributos de clase? Hasta donde yo sé, 'on()' utiliza el evento de burbujeo para detectar eventos, no cambios DOM, en los elementos de un elemento. Sin embargo, si los eventos de DOM del navegador no son confiables (que definitivamente eran en el momento de escribir), eso no ayudará a lograr lo que el OP estaba pidiendo sin recurrir a los hacks de intervalos. Algunas de estas circunstancias pueden haber cambiado, por lo que tengo genuina curiosidad sobre cómo se lograría esto. Por favor elabora. – jwueller

Puede consultar el following article para obtener algunas ideas.

Fuente

2011-05-17 16:47:39

No sé si la clase que agrega al enlace es siempre la misma, pero si es así, ¿por qué no usa CSS para este?

<style type='text/css> 
    .myaddedclass{display:none} 
</style>

Fuente

2011-05-17 17:20:10

Sí. @Rooney, si todo lo que quiere es ocultar/mostrar elementos, cambiar colores u otros atributos , etc., solo apunte a CSS en la clase que está agregando y no tiene que supervisar el cambio. CSS lo hará por usted. Así es como manejo hide/show, marcando la fila "actualmente seleccionada" , y problemas similares. –

Si sólo tiene que resolver esto de una vez (es decir, no en código), inspector de la web de Google Chrome muestra DOM cambia en vivo. Sin embargo, no estoy seguro si eso ayudaría a resolver su situación.

Fuente

2011-05-17 17:23:37

+1 También puede hacer clic con el botón derecho en el nodo en (en la pestaña Elementos) y hacer clic en "Romper en la modificación de atributos": esto debería detener el JS en la línea correcta. (Desmultifíquelo para obtener mejores saltos de línea: http://jsbeautifier.org/) – peteorpeter

@peteorpeter: ooh, eso es muy útil, no tenía idea de eso. –

Acabo de encontrarlo yo mismo (quién sabe cuánto tiempo ha estado allí - actualizaciones furtivas de Chrome ...) – peteorpeter

¿Cómo puedo detectar cuándo cambia la clase de un elemento HTML?

Respuesta

Cuestiones relacionadas