Wie erkennt man Änderungen der Div-Höhe oder der CSS-Attribute in jQuery?

Erkennen von Div-Höhen- oder CSS-Attributänderungen in jQuery

Ereignisse bei CSS-Änderungen auslösen

jQuery fehlt von Natur aus ein bestimmtes Ereignis Handler für CSS-Attributänderungen, einschließlich Höhenänderungen. Es gibt jedoch zwei Ansätze, um dieses Problem anzugehen:

Ansatz 1: DOM-Elementüberwachung

Inspizieren Sie das DOM-Element regelmäßig in einem vordefinierten Intervall (z. B. 500 Millisekunden) auf CSS-Änderungen.

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

Ansatz 2: Benutzerdefinierte Ereignisauslösung

Binden Sie einen benutzerdefinierten Ereignishandler (im Beispiel „heightChange“) an das Element. Lösen Sie das Ereignis aus, wenn Sie sein CSS ändern.

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


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

Der zweite Ansatz wird empfohlen, wenn Sie die Kontrolle über CSS-Änderungen haben, da er effizienter und eleganter ist.

Dokumentation:

• bind: Einen Event-Handler an ein Element anhängen.
• trigger: Alle Event-Handler für einen angegebenen Event-Typ ausführen.

Hinweis:

Es gab ein veraltetes DOMAttrModified-Mutationsereignis, das die Verfolgung von CSS-Änderungen ermöglichte, aber es wird nicht mehr empfohlen.

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