Bagaimana untuk Mencipta Acara Tersuai untuk Menjejaki Perubahan Atribut CSS?

Acara Tersuai untuk Menjejaki Perubahan Atribut CSS

Masalah: Bagaimanakah anda boleh mencetuskan acara apabila div atau mana-mana Perubahan atribut CSS?

Perbincangan: Walaupun tiada acara perubahan CSS terbina dalam, anda boleh mencipta acara anda sendiri. Terdapat dua kaedah:

Kaedah 1: Pengundian 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>

Kaedah 2: Pencetus Peristiwa Manual

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

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

Kelebihan:

• Kaedah 1 adalah automatik, memantau DOM untuk perubahan sentiasa.
• Kaedah 2 lebih terkawal, mencetuskan acara hanya apabila anda mengubah suai CSS.

Dokumentasi:

• bind: Melampirkan pengendali acara pada elemen yang ditentukan.
• pencetus: Melaksanakan acara pengendali yang dilampirkan pada elemen.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Acara Tersuai untuk Menjejaki Perubahan Atribut CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!