Bir elemanın "display" css özelliğinin değiştirilip değiştirilmediğini tespit etmenin bir yolu var mı (yok veya blok veya satır içi blok ... olarak)? değilse, herhangi bir eklenti var mı? Teşekkürler
Yanıtlar:
Not
Mutasyon etkinlikleri , bu gönderi yazıldığından beri kullanımdan kaldırıldı ve tüm tarayıcılar tarafından desteklenmeyebilir. Bunun yerine bir mutasyon gözlemcisi kullanın .
Evet yapabilirsin. DOM L2 Events modülü, mutasyon olaylarını tanımlar ; bunlardan biri - DOMAttrModified ihtiyacınız olanıdır. Kabul edilirse, bunlar geniş çapta uygulanmaz, ancak en azından Gecko ve Opera tarayıcılarında desteklenir.
Aşağıdaki satırlarda bir şeyler deneyin:
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 kullanan deneyebilirsiniz IE "PropertyChange" olayı için bir yedek olarak DOMAttrModified. styleDeğişikliklerin güvenilir bir şekilde tespit edilmesine izin vermelidir .
classözniteliğini (veya öznitelik seçicileri CSS'de varsa başka bir özniteliği) değiştirmek de öğeyi değiştirebilir, bu nedenle DOMAttrModifiedbelge kök öğesindeki tüm olayları işlemeniz gerekir . her şeyi yakaladığınızdan emin olun.
Attrchange jQuery eklentisini kullanabilirsiniz . Eklentinin ana işlevi, HTML öğelerinin öznitelik değişikliğine bir dinleyici işlevi bağlamaktır.
Kod örneği:
$("#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...
}
}
}
});
cssCSS özelliklerini test etmek için jQuery'nin işlevini kullanabilirsiniz , örn. if ($('node').css('display') == 'block').
Colin haklı, belirli bir CSS özelliği değiştirildiğinde tetiklenen açık bir olay yok. Ancak, onu ters çevirebilir ve ekranı ayarlayan bir olayı ve başka her şeyi tetikleyebilirsiniz.
Ayrıca, istediğiniz davranışı elde etmek için CSS sınıfları eklemeyi düşünün. Genellikle, içeren bir öğeye bir sınıf ekleyebilir ve tüm öğeleri etkilemek için CSS kullanabilirsiniz. Genellikle bir AJAX yanıtının beklemede olduğunu belirtmek için gövde elemanına bir sınıf atıyorum. Daha sonra istediğim görüntüyü elde etmek için CSS seçicileri kullanabilirim.
Aradığınız şeyin bu olup olmadığından emin değilim.
Css geçişinin etkileyeceği özellikler için, geçiş sonu olayını kullanabilir, örneğin z-endeksi için:
$(".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>Yapamazsın. CSS, "olayları" desteklemez. Ne için ihtiyacın olduğunu sormaya cüret edebilir miyim? SO'daki bu gönderiye göz atın . Bir etkinliği bir stil değişikliğine bağlamak isteyebileceğiniz bir neden düşünemiyorum. Burada stil değişikliğinin bir javascript parçası tarafından başka bir yerde tetiklendiğini varsayıyorum. Neden oraya fazladan mantık eklemiyorsunuz?