Wie erkennt man Änderungen der DIV-Höhe oder der CSS-Attribute mit jQuery?

Ermitteln 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:

<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);
}</code>

Benutzerdefinierte Ereignisbindung mit „bind()“:

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

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


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

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

Hinweis:

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

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