Heim >Web-Frontend >CSS-Tutorial >Wie erkennt man Änderungen der Div-Höhe oder der CSS-Attribute 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:
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>
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:
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!