Puoi avere un trigger hook javascript dopo che l’object di stile di un elemento DOM cambia?

Un elemento ha un object style javascript che contiene i diversi nomi e valori degli stili css. Mi piacerebbe triggersre una funzione ogni volta che questo object cambia senza utilizzare il polling . Esiste un modo per farlo in un modo che sia compatibile con più browser e funzioni in modo affidabile con il codice di terze parti (perché supponiamo che tu stia fornendo uno script drop-in)? Associare un evento javascript come DOMAttrModified o DOMSubtreeModified non è sufficiente perché non funzionano in Chrome.

Modifica 4: Demo live

 $(function() { $('#toggleColor').on('click', function() { $(this).toggleClass('darkblue'); }).attrchange({ trackValues: true, callback: function(event) { $(this).html("
  • Attribute Name: " + event.attributeName + "
  • Old Value: " + event.oldValue + "
  • New Value: " + event.newValue + "
"); } }); });
 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; } #toggleColor { height: 70px; width: 300px; padding: 5px; border: 1px solid #c2c2c2; background-color: #DBEAF9; } #toggleColor span { font-weight: bold; } #toggleColor.darkblue { background-color: #1A9ADA; } 
   

Click below div to toggle class darkblue.

EDIT2:

Se vuoi ancora utilizzare l’ mutation observer , usa questa libreria: riassunto delle mutazioni


MODIFICARE:

Come ho detto nella mia risposta qui sotto e grazie a Vega per il suo commento, l’utilizzo di oggetti come mutation observers oggetti object.watch o mutation observers non è raccomandato per l’utilizzo in applicazioni di grandi dimensioni. questa è la citazione attuale da MDN :

In generale, si dovrebbe evitare di usare watch() e unwatch() quando ansible. Questi due metodi sono implementati solo in Gecko e sono destinati principalmente al debugging. Inoltre, l’ uso di watchpoint ha un grave impatto negativo sulle prestazioni, che è particolarmente vero quando viene utilizzato su oggetti globali , come ad esempio una finestra. Di solito puoi usare setter e getter o proxy . Vedi Compatibilità per i dettagli.

avvertimento

Quindi, se la compatibilità cross-browser è nella tua lista di controllo, di nuovo, consiglio vivamente di sovrascrivere setter e getter di oggetti di style .


usa object.watch e object.watch in mente per una soluzione cross-browser:

  • Javascript Object.Watch per tutti i browser?
  • object.watch polyfill
  • Guarda le modifiche alle proprietà dell’object in JavaScript

È ansible sovrascrivere anche i metodi getter e setter dell’object style dell’elemento.

È disponibile un plugin jQuery per questo orologio jQuery

Ho trovato questo piccolo plugin che fa esattamente questo e può essere cambiato per aggiungere qualsiasi mutazione che desideri … Anche scrollHeight cambia listener.

Il plugin: http://www.jqui.net/jquery-projects/jquery-mutate-official/

ecco la demo: http://www.jqui.net/demo/mutate/

Anche per tutti i brower più moderni non esiste un modo cross-browser per raggiungere questo objective. Dovresti indirizzare tutte le modifiche dello stile css attraverso una funzione che potrebbe innescare i listener di eventi. Questo sarebbe il metodo più pulito.

In una risposta a una domanda simile , è stato suggerito che se si sa che le interazioni di impostazione degli stili sarebbero state eseguite tramite un’interfaccia standard (cioè sempre usando jQuery, ecc.) È stato suggerito di triggersre gli eventi personalizzati ogni volta che viene chiamato il metodo della libreria.

Ciò consentirebbe una matrice di supporto più ampia ma lascerebbe qualsiasi modifica di proprietà ignorata se eseguita senza utilizzare il metodo di libreria. Sembra inoltre che tale approccio non sia applicabile ai coloni nativi in quanto non sempre si può fare affidamento.

Puoi usare il plugin jQuery attrchange . La funzione principale del plugin è quella di associare una funzione listener al cambio di attributo degli elementi HTML.