How to Create a Custom Event to Track CSS Attribute Changes?

Custom Event to Track CSS Attribute Changes

Problem: How can you trigger an event when a div or any CSS attribute changes?

Discussion: While there is no built-in CSS change event, you can create your own. There are two methods:

Method 1: DOM Polling

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

Method 2: Manual Event Trigger

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

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

Advantages:

• Method 1 is automatic, monitoring the DOM for changes constantly.
• Method 2 is more controlled, triggering the event only when you modify the CSS.

Documentation:

• bind: Attaches an event handler to the specified element.
• trigger: Executes event handlers attached to an element.

The above is the detailed content of How to Create a Custom Event to Track CSS Attribute Changes?. For more information, please follow other related articles on the PHP Chinese website!