Ereigniserkennung, wenn sich die CSS-Eigenschaft mithilfe von Jquery geändert hat

Gibt es eine Möglichkeit zu erkennen, ob die CSS-Eigenschaft "display" eines Elements geändert wurde (ob keine oder ein Block oder ein Inline-Block ...)? wenn nicht, irgendein Plugin? Vielen Dank

Hinweis

Mutationsereignisse sind seit dem Schreiben dieses Beitrags veraltet und werden möglicherweise nicht von allen Browsern unterstützt. Verwenden Sie stattdessen einen Mutationsbeobachter .

Ja, du kannst. Das Modul DOM L2-Ereignisse definiert Mutationsereignisse . einer von ihnen - DOMAttrModified ist das, was Sie brauchen. Zugegeben, diese sind nicht weit verbreitet, werden aber zumindest in Gecko- und Opera-Browsern unterstützt.

Versuchen Sie etwas in diese Richtung:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Sie können auch versuchen, das IE-Ereignis "propertychange" als Ersatz für zu verwenden DOMAttrModified. Es sollte ermöglichen, styleÄnderungen zuverlässig zu erkennen .

Sie können das attrchange jQuery-Plugin verwenden . Die Hauptfunktion des Plugins besteht darin, eine Listener-Funktion bei Attributänderungen von HTML-Elementen zu binden.

Codebeispiel:

$("#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...
            }
        }
    }
});

Sie können die cssFunktion von jQuery verwenden, um die CSS-Eigenschaften zu testen, z. if ($('node').css('display') == 'block').

Colin hat Recht, dass es kein explizites Ereignis gibt, das ausgelöst wird, wenn eine bestimmte CSS-Eigenschaft geändert wird. Möglicherweise können Sie es jedoch umdrehen und ein Ereignis auslösen, das die Anzeige festlegt, und was auch immer.

Erwägen Sie auch das Hinzufügen von CSS-Klassen, um das gewünschte Verhalten zu erzielen. Oft können Sie einem enthaltenden Element eine Klasse hinzufügen und CSS verwenden, um alle Elemente zu beeinflussen. Ich schlage oft eine Klasse auf das body-Element, um anzuzeigen, dass eine AJAX-Antwort aussteht. Dann kann ich CSS-Selektoren verwenden, um die gewünschte Anzeige zu erhalten.

Ich bin mir nicht sicher, ob Sie danach suchen.

Verwenden Sie für Eigenschaften, für die sich der CSS-Übergang auswirkt, das Transitionend-Ereignis, z. B. für den 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>

Das kannst du nicht. CSS unterstützt keine "Ereignisse". Darf ich fragen, wofür du es brauchst? Schauen Sie sich diesen Beitrag hier auf SO an. Ich kann mir keinen Grund vorstellen, warum Sie ein Event mit einem Stilwechsel verbinden möchten. Ich gehe hier davon aus, dass der Stilwechsel irgendwo anders durch ein Stück Javascript ausgelöst wird. Warum nicht dort zusätzliche Logik hinzufügen?