Peristiwa mendeteksi ketika properti css berubah menggunakan Jquery

Adakah cara untuk mendeteksi jika properti css "display" dari suatu elemen diubah (menjadi tidak ada atau blok atau blok-sebaris ...)? jika tidak, plugin apa saja? Terima kasih

Catatan

Peristiwa mutasi sudah tidak berlaku lagi sejak postingan ini ditulis, dan mungkin tidak didukung oleh semua browser. Sebagai gantinya, gunakan pengamat mutasi .

Ya kamu bisa. Modul DOM L2 Events mendefinisikan kejadian mutasi ; salah satunya - DOMAttrModified adalah yang Anda butuhkan. Memang, ini tidak diterapkan secara luas, tetapi didukung setidaknya di browser Gecko dan Opera.

Cobalah sesuatu seperti ini:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Anda juga dapat mencoba memanfaatkan peristiwa "propertychange" IE sebagai pengganti DOMAttrModified. Ini harus memungkinkan untuk mendeteksi styleperubahan dengan andal.

Anda dapat menggunakan plugin jQuery attrchange . Fungsi utama plugin adalah untuk mengikat fungsi listener pada perubahan atribut elemen HTML.

Contoh kode:

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "display") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/inline/i) == -1) {

                // your code to execute goes here...
            }
        }
    }
});

Anda dapat menggunakan cssfungsi jQuery untuk menguji properti CSS, misalnya. if ($('node').css('display') == 'block').

Colin benar, bahwa tidak ada peristiwa eksplisit yang diaktifkan saat properti CSS tertentu diubah. Tapi Anda mungkin bisa membalikkannya, dan memicu peristiwa yang mengatur tampilan, dan apa pun.

Pertimbangkan juga untuk menggunakan menambahkan kelas CSS untuk mendapatkan perilaku yang Anda inginkan. Seringkali Anda dapat menambahkan kelas ke elemen penampung, dan menggunakan CSS untuk memengaruhi semua elemen. Saya sering menampar kelas ke elemen tubuh untuk menunjukkan bahwa respons AJAX tertunda. Kemudian saya dapat menggunakan pemilih CSS untuk mendapatkan tampilan yang saya inginkan.

Tidak yakin apakah ini yang Anda cari.

Untuk properti yang akan terpengaruh oleh transisi css, dapat menggunakan peristiwa transisi akhir, contoh untuk z-index:

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

Tidak boleh. CSS tidak mendukung "acara". Berani saya bertanya untuk apa Anda membutuhkannya? Lihat posting ini di sini di SO. Saya tidak dapat memikirkan alasan mengapa Anda ingin mengaitkan acara dengan perubahan gaya. Saya berasumsi di sini bahwa perubahan gaya dipicu di tempat lain oleh javascript. Mengapa tidak menambahkan logika ekstra di sana?