Wie erkennt man CSS-Änderungen, insbesondere Höhenänderungen, mit jQuery?

So erkennen Sie CSS-Änderungen mit JQuery

JQuery verfügt nicht über ein integriertes Ereignis zum Erkennen von Änderungen in CSS-Attributen. Sie können jedoch mit den folgenden Ansätzen Ihre eigenen erstellen:

Kontinuierliche DOM-Überwachung (erster Weg):

Fragen Sie das DOM regelmäßig (z. B. alle 500 Millisekunden) ab Vergleichen Sie den aktuellen CSS-Attributwert mit dem vorherigen Wert. Wenn sie unterschiedlich sind, lösen Sie ein Ereignis aus.

Beispiel:

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
    if ($element.css('height') != lastHeight) {
        alert('xxx');
        lastHeight = $element.css('height');
    }
    setTimeout(checkForChanges, 500);
}

checkForChanges();</code>

Manuelle Ereignisauslösung (zweiter Weg):

Binden Sie einen benutzerdefinierten Ereignishandler an das Zielelement und lösen Sie dieses Ereignis dann manuell aus, wenn Sie das CSS des Elements ändern.

Beispiel:

<code class="javascript">$('#mainContent').bind('heightChange', function(){
    alert('xxx');
});

$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange');
});</code>

Spezifische Bestimmung von Höhenänderungen (Lösung für das anfängliche Problem):

Im speziellen Fall der Erkennung von Höhenänderungen für das #mainContent-Div verwenden Sie den zweiten Ansatz mit dem folgenden Code:

<code class="javascript">$('#mainContent').bind('heightChange', function () {
    $("#separator").css('height', $("#mainContent").height());
});</code>

Denken Sie daran, den Event-Handler zu binden, bevor Sie Höhenänderungen am #mainContent-Div vornehmen.

Das obige ist der detaillierte Inhalt vonWie erkennt man CSS-Änderungen, insbesondere Höhenänderungen, mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!