Bestimmen von Änderungen in der DIV-Höhe oder in CSS-Attributen

Bei der Arbeit mit Webseiten ist es oft notwendig, Änderungen in der Höhe oder anderen CSS-Attributen zu verfolgen Attribute von Elementen. jQuery bietet verschiedene Optionen, um diesem Bedarf gerecht zu werden.

Ereignisverfolgung mit 'change()':

Während das Ereignis 'change()' hauptsächlich für Eingabeelemente verwendet wird , kann es angepasst werden, um CSS-Änderungen zu erkennen. Bei diesem Ansatz werden jedoch die CSS-Eigenschaften des Elements regelmäßig überprüft und ein Ereignis ausgelöst, wenn sie von den vorherigen Werten abweichen:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Benutzerdefinierte Ereignisbindung mit 'bind()':

Eine effizientere Lösung besteht darin, ein benutzerdefiniertes Ereignis zu erstellen und es an das gewünschte Element zu binden:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


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

In diesem Fall lösen wir das Ereignis „heightChange“ immer dann aus, wenn die Höhe des Div „mainContent“ geändert wird.

Hinweis:

• Die Häufigkeit der Prüfungen in der Funktion „checkForChanges()“ kann an spezifische Anforderungen angepasst werden.
• Die Die Methoden „bind()“ und „trigger()“ sind in der jQuery-Dokumentation zur weiteren Referenz gut dokumentiert.