C'è un modo per rilevare se la proprietà css "display" di un elemento è cambiata (a se none o block o inline-block ...)? se no, qualche plugin? Grazie
Risposte:
Nota
Gli eventi di mutazione sono stati deprecati da quando è stato scritto questo post e potrebbero non essere supportati da tutti i browser. Usa invece un osservatore di mutazione .
Si, puoi. Il modulo Eventi DOM L2 definisce gli eventi di mutazione ; uno di loro - DOMAttrModified è quello che ti serve. Certo, questi non sono ampiamente implementati, ma sono supportati almeno nei browser Gecko e Opera.
Prova qualcosa in questo modo:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';Puoi anche provare a utilizzare l'evento "propertychange" di IE in sostituzione di DOMAttrModified. Dovrebbe consentire di rilevare i stylecambiamenti in modo affidabile.
class attribute (or any other attribute if attribute selectors are present in the CSS) of an ancestor of the element could also change the element, so you'd have to handle all DOMAttrModified events on the document root element to be sure of catching everything.
Puoi usare il plugin attrchange jQuery . La funzione principale del plugin è quella di associare una funzione di ascolto alla modifica degli attributi degli elementi HTML.
Esempio di codice:
$("#myDiv").attrchange({
trackValues: true, // set to true so that the event object is updated with old & new values
callback: function(evnt) {
if(evnt.attributeName == "display") { // which attribute you want to watch for changes
if(evnt.newValue.search(/inline/i) == -1) {
// your code to execute goes here...
}
}
}
});Puoi usare la cssfunzione di jQuery per testare le proprietà CSS, ad es. if ($('node').css('display') == 'block').
Colin ha ragione, che non esiste un evento esplicito che viene attivato quando una specifica proprietà CSS viene modificata. Ma potresti essere in grado di capovolgerlo e attivare un evento che imposta il display e qualsiasi altra cosa.
Considera anche di aggiungere classi CSS per ottenere il comportamento che desideri. Spesso puoi aggiungere una classe a un elemento contenitore e utilizzare i CSS per influenzare tutti gli elementi. Spesso schiaffo una classe sull'elemento body per indicare che una risposta AJAX è in sospeso. Quindi posso usare i selettori CSS per ottenere la visualizzazione che desidero.
Non sono sicuro che sia quello che stai cercando.
Per le proprietà per le quali la transizione CSS influirà, è possibile utilizzare l'evento Transitionend, ad esempio per z-index:
$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
console.log("end", e);
alert("z-index changed");
});
$(".changeButton").on("click", function() {
console.log("click");
document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});.observed-element {
transition: z-index 1ms;
-webkit-transition: z-index 1ms;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>Non puoi. CSS non supporta "eventi". Oserei chiederti a cosa ti serve? Dai un'occhiata a questo post qui su SO. Non riesco a pensare a un motivo per cui vorresti collegare un evento a un cambio di stile. Presumo qui che il cambio di stile sia attivato altrove da un pezzo di javascript. Perché non aggiungere ulteriore logica lì?