Comment créer un événement personnalisé pour suivre les modifications des attributs CSS ?

Événement personnalisé pour suivre les modifications des attributs CSS

Problème : Comment pouvez-vous déclencher un événement lorsqu'un div ou tout autre Modifications des attributs CSS ?

Discussion : Bien qu'il n'y ait pas d'événement de modification CSS intégré, vous pouvez créer le vôtre. Il existe deux méthodes :

Méthode 1 : interrogation DOM

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

Méthode 2 : déclenchement manuel d'un événement

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

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

Avantages :

• La méthode 1 est automatique, surveillant constamment les changements dans le DOM.
• La méthode 2 est plus contrôlée, déclenchant l'événement uniquement lorsque vous modifiez le CSS.

Documentation :

• bind : attache un gestionnaire d'événement à l'élément spécifié.
• trigger : exécute l'événement gestionnaires attachés à un élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!