Olay, css özelliğinin Jquery

Question

ile değiştiğini algılar Bir öğenin "display" css özelliğinin değiştirilip değiştirilmediğini algılamanın bir yolu var mı (yok mu yoksa engellen mi yoksa satır içi satır ...)? değilse, herhangi bir eklenti? Teşekkürler

Answer 1

Evet yapabilirsiniz. DOM L2 Events modülü mutation events; bunlardan biri - DOMAttrModified ihtiyacınız olanı. Verilen, bunlar yaygın olarak uygulanmamaktadır, ancak en azından Gecko ve Opera tarayıcılarında desteklenmektedir. Bu doğrultuda

deneyin şey:

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

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

Ayrıca DOMAttrModified bir yedek olarak IE's "propertychange" event kullanan deneyebilirsiniz. style değişikliklerini güvenilir bir şekilde algılamaya izin vermelidir.

Answer 2

Yapamazsınız. CSS "olayları" desteklemez. Cesaretin ne için ihtiyacın olduğunu soruyorum? Buradaki post numarasına bakın. Bir olayı stil değişikliğine bağlamak için neden bir sebep düşünemiyorum. Burada, stil değişikliğinin başka bir yerde bir javascript tarafından tetiklendiğini farz ediyorum. Neden orada ekstra mantık eklemiyorsunuz?

Answer 3

CSS özelliklerini test etmek için jQuery'nin css işlevini kullanabilirsiniz. if ($('node').css('display') == 'block').

Colin, belirli bir CSS özelliği değiştiğinde tetiklenen açık bir olay olmadığını doğru. Ancak onu çevirebilir ve ekranı belirleyen bir olayı tetikleyebilir ve başka bir şey yapabilirsiniz.

Ayrıca, istediğiniz davranışı almak için CSS sınıflarını eklemeyi kullanmayı da düşünün. Çoğunlukla, içeren bir öğeye bir sınıf ekleyebilir ve tüm öğeleri etkilemek için CSS kullanabilirsiniz. Bir AJAX yanıtının beklemediğini belirtmek için sıklıkla bir vücut elemanına bir sınıf attım. Sonra istediğim ekranı almak için CSS seçicilerini kullanabilirim.

Aradığınız şeyin bu olduğundan emin değil misiniz?

Answer 4

attrchange jQuery plugin'u kullanabilirsiniz. Eklentinin ana işlevi, HTML öğelerinin özellik değişikliği konusunda bir dinleyici işlevini bağlamaktır.

kod örneği:

CSS geçiş z endeksi için transitionend etkinliği, örnek kullanabilir, etkileyecek olan özellikleri için

$("#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... 
      } 
     } 
    } 
}); 

Answer 5

:

$(".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>