Heim >Web-Frontend >CSS-Tutorial >Wie erkennt man Änderungen der Div-Höhe oder der CSS-Attribute in jQuery?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-04 02:21:301043Durchsuche

How to Detect Changes in Div Height or CSS Attributes 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn