Wie erstelle ich ein benutzerdefiniertes Ereignis, um CSS-Attributänderungen zu verfolgen?

Benutzerdefiniertes Ereignis zum Verfolgen von CSS-Attributänderungen

Problem: Wie können Sie ein Ereignis auslösen, wenn ein Div oder ein anderes CSS-Attributänderungen?

Diskussion: Obwohl es kein integriertes CSS-Änderungsereignis gibt, können Sie Ihr eigenes erstellen. Es gibt zwei Methoden:

Methode 1: DOM-Abfrage

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
  if ($element.css('height') != lastHeight) {
    // CSS height changed
    lastHeight = $element.css('height');
  }
  setTimeout(checkForChanges, 500);
}
checkForChanges();</code>

Methode 2: Manueller Ereignisauslöser

<code class="javascript">$('#mainContent').bind('heightChange', function() {
  // CSS height changed
});

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

Vorteile:

• Methode 1 ist automatisch und überwacht das DOM ständig auf Änderungen.
• Methode 2 ist kontrollierter und löst das Ereignis nur aus, wenn Sie Änderungen vornehmen das CSS.

Dokumentation:

• bind: Fügt einen Event-Handler an das angegebene Element an.
• trigger: Führt ein Ereignis aus Handler, die an ein Element angehängt sind.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein benutzerdefiniertes Ereignis, um CSS-Attributänderungen zu verfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!