Czy istnieje sposób na wykrycie, czy właściwość css „display” elementu została zmieniona (na none, block lub inline-block…)? jeśli nie, to jakaś wtyczka? Dzięki
Odpowiedzi:
Uwaga
Zdarzenia mutacji zostały wycofane od czasu napisania tego posta i mogą nie być obsługiwane przez wszystkie przeglądarki. Zamiast tego użyj obserwatora mutacji .
Tak, możesz. Moduł DOM L2 Events definiuje zdarzenia mutacji ; jeden z nich - DOMAttrModified jest tym, którego potrzebujesz. To prawda, nie są one szeroko stosowane, ale są obsługiwane przynajmniej w przeglądarkach Gecko i Opera.
Spróbuj czegoś w ten sposób:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';
Możesz także spróbować użyć zdarzenia „propertychange” w IE jako zamiennika dla DOMAttrModified. Powinien umożliwiać stylerzetelne wykrywanie zmian.
classatrybutu (lub dowolnego innego atrybutu, jeśli selektory atrybutów są obecne w CSS) przodka elementu może również zmienić element, więc musiałbyś obsługiwać wszystkie DOMAttrModifiedzdarzenia w głównym elemencie dokumentu na upewnij się, że złapiesz wszystko.
Możesz użyć wtyczki attrchange jQuery . Główną funkcją wtyczki jest powiązanie funkcji nasłuchującej przy zmianie atrybutów elementów HTML.
Przykład kodu:
$("#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...
}
}
}
});
Możesz użyć cssfunkcji jQuery do przetestowania właściwości CSS, np. if ($('node').css('display') == 'block').
Colin ma rację, że nie istnieje żadne jawne zdarzenie, które zostanie wywołane, gdy zmieniona zostanie określona właściwość CSS. Ale możesz być w stanie odwrócić to i wywołać zdarzenie, które ustawia wyświetlacz i cokolwiek innego.
Rozważ także dodanie klas CSS, aby uzyskać pożądane zachowanie. Często możesz dodać klasę do elementu zawierającego i użyć CSS do wpływania na wszystkie elementy. Często nakładam klasę na element body, aby wskazać, że oczekuje na odpowiedź AJAX. Następnie mogę użyć selektorów CSS, aby uzyskać żądany wyświetlacz.
Nie jestem pewien, czy tego właśnie szukasz.
Dla właściwości, na które wpłynie przejście css, można użyć zdarzenia przejścia, na przykład dla 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>Nie możesz. CSS nie obsługuje „wydarzeń”. Czy ośmielę się zapytać, do czego go potrzebujesz? Sprawdź ten post tutaj na SO. Nie przychodzi mi do głowy żaden powód, dla którego chciałbyś połączyć wydarzenie ze zmianą stylu. Zakładam tutaj, że zmiana stylu jest wywoływana gdzie indziej przez fragment javascript. Dlaczego nie dodać tam dodatkowej logiki?