Wykrywa zdarzenie, gdy właściwość css została zmieniona za pomocą Jquery

Question 1

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

Question 2

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.

Question 3

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...
            }
        }
    }
});

Question 4

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.

Question 5

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>

Rozwiń fragment

Question 6

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?

Answer 1

91

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

javascript jquery html HP.
źródło

Answer 2

93

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.

kangax
źródło

Dzięki. Czy będzie obsługiwać przeglądarkę Firefox?

HP.

7

@Boldewyn: True, ale zmiana 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.

Tim Down

12

To zdarzenie jest przestarzałe w w3c. To musi być inny sposób.

ccsakuweb

8

Zdarzenia mutacji zostały oznaczone jako przestarzałe w specyfikacji DOM Events, ponieważ projekt API jest wadliwy. Obserwatorzy mutacji są proponowanym zamiennikiem. Oto link [ developer.mozilla.org/en-US/docs/DOM/Mutation_events]

Anmol Saraf

1

Anmol - link do MDN dla wydarzeń związanych z mutacją powinien wyglądać następująco: developer.mozilla.org/en-US/docs/Web/Guide/Events/ ...

groovecoder

Answer 3

Dzięki. Czy będzie obsługiwać przeglądarkę Firefox?

HP.

Answer 4

7

@Boldewyn: True, ale zmiana 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.

Tim Down

Answer 5

12

To zdarzenie jest przestarzałe w w3c. To musi być inny sposób.

ccsakuweb

Answer 6

8

Zdarzenia mutacji zostały oznaczone jako przestarzałe w specyfikacji DOM Events, ponieważ projekt API jest wadliwy. Obserwatorzy mutacji są proponowanym zamiennikiem. Oto link [ developer.mozilla.org/en-US/docs/DOM/Mutation_events]

Anmol Saraf

Answer 7

1

Anmol - link do MDN dla wydarzeń związanych z mutacją powinien wyglądać następująco: developer.mozilla.org/en-US/docs/Web/Guide/Events/ ...

groovecoder

Answer 8

19

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...
            }
        }
    }
});

Muhammad Reda
źródło

Zauważ, że dla niektórych wtyczek, które modyfikują CSS evnt.attributeName to „styl”, a nie „wyświetlanie”.

jerrygarciuh

Działa dobrze, ale jest szybsze niż wyszukiwanie wyrażeń regularnych i nie potrzebujesz pierwszego if (evnt.attributeName ...): if (evnt.newValue.indexOf ('display: inline-block')> -1) {. ..; return;}

Dan Randolph

Answer 9

Zauważ, że dla niektórych wtyczek, które modyfikują CSS evnt.attributeName to „styl”, a nie „wyświetlanie”.

jerrygarciuh

Answer 10

Działa dobrze, ale jest szybsze niż wyszukiwanie wyrażeń regularnych i nie potrzebujesz pierwszego if (evnt.attributeName ...): if (evnt.newValue.indexOf ('display: inline-block')> -1) {. ..; return;}

Dan Randolph

Answer 11

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.

Answer 12

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>

Rozwiń fragment

Answer 13

-17

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?

Colin
źródło

1

Mam kilka zdarzeń, które mogą spowodować wyświetlenie lub nie pola. I mam jeszcze jeden element, który zależy od wyglądu tego pudełka. Teraz nie chcę powtarzać kodu i łączyć się ze wszystkimi innymi zdarzeniami, które pojawiają się w pudełku, chociaż jest to jeden ze sposobów. Tylko nadmiar!

HP.

Jest zbędny, może przydałoby się użycie systemu opartego na regułach? tj. jakąś strukturę podobną do JSON, która definiuje, co powinno się stać z jakąś kontrolką, gdy zmieni się inna kontrolka? w ten sposób wystarczyłoby utworzyć tylko jedną funkcję, która używa obiektu reguły i być może bieżącego elementu sterującego (id) jako parametru?

Colin

3

Dlaczego jest to odrzucane? Zdefiniowanie klasy dla rodzica obu elementów i zmiana stylu na nim to jedyne słuszne rozwiązanie.

Ilia G

11

Głos za „Nie mogę wymyślić powodu, dla którego chciałbyś połączyć wydarzenie ze zmianą stylu” - jeśli nie możesz wymyślić powodu, nie oznacza to, że nie ma możliwego powodu, a „Dlaczego nie dodawać tam dodatkowej logiki? ” - ponieważ nie zawsze możesz modyfikować skrypty.

Andrei Cojea

Aby podać przykład, chcę zmienić właściwość fill ścieżki svg, gdy zmienia się właściwość koloru elementu nadrzędnego.

Andrei Cojea

Answer 14

1

Mam kilka zdarzeń, które mogą spowodować wyświetlenie lub nie pola. I mam jeszcze jeden element, który zależy od wyglądu tego pudełka. Teraz nie chcę powtarzać kodu i łączyć się ze wszystkimi innymi zdarzeniami, które pojawiają się w pudełku, chociaż jest to jeden ze sposobów. Tylko nadmiar!

HP.

Answer 15

Jest zbędny, może przydałoby się użycie systemu opartego na regułach? tj. jakąś strukturę podobną do JSON, która definiuje, co powinno się stać z jakąś kontrolką, gdy zmieni się inna kontrolka? w ten sposób wystarczyłoby utworzyć tylko jedną funkcję, która używa obiektu reguły i być może bieżącego elementu sterującego (id) jako parametru?

Colin

Answer 16

3

Dlaczego jest to odrzucane? Zdefiniowanie klasy dla rodzica obu elementów i zmiana stylu na nim to jedyne słuszne rozwiązanie.

Ilia G

Answer 17

11

Głos za „Nie mogę wymyślić powodu, dla którego chciałbyś połączyć wydarzenie ze zmianą stylu” - jeśli nie możesz wymyślić powodu, nie oznacza to, że nie ma możliwego powodu, a „Dlaczego nie dodawać tam dodatkowej logiki? ” - ponieważ nie zawsze możesz modyfikować skrypty.

Andrei Cojea

Answer 18

Aby podać przykład, chcę zmienić właściwość fill ścieżki svg, gdy zmienia się właściwość koloru elementu nadrzędnego.

Andrei Cojea

Wykrywa zdarzenie, gdy właściwość css została zmieniona za pomocą Jquery

Odpowiedzi:

Uwaga