Détection d'événement lorsque la propriété css a changé à l'aide de Jquery

Existe-t-il un moyen de détecter si la propriété css "afficher" d'un élément est modifiée (en absence ou en bloc ou en bloc en ligne ...)? sinon, un plugin? Merci

Remarque

Les événements de mutation sont obsolètes depuis la rédaction de cet article et peuvent ne pas être pris en charge par tous les navigateurs. Utilisez plutôt un observateur de mutation .

Oui, vous pouvez. Le module Evénements DOM L2 définit les événements de mutation ; l'un d'entre eux - DOMAttrModified est celui dont vous avez besoin. Certes, ceux-ci ne sont pas largement mis en œuvre, mais sont pris en charge au moins dans les navigateurs Gecko et Opera.

Essayez quelque chose du genre:

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

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

Vous pouvez également essayer d'utiliser l'événement "propertychange" d'IE en remplacement de DOMAttrModified. Il doit permettre de détecter les stylechangements de manière fiable.

Vous pouvez utiliser le plugin attrchange jQuery . La fonction principale du plugin est de lier une fonction d'écoute lors du changement d'attribut des éléments HTML.

Exemple de code:

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

Vous pouvez utiliser la cssfonction de jQuery pour tester les propriétés CSS, par exemple. if ($('node').css('display') == 'block').

Colin a raison, qu'il n'y a pas d'événement explicite qui est déclenché lorsqu'une propriété CSS spécifique est modifiée. Mais vous pourrez peut-être le retourner et déclencher un événement qui définit l'affichage, etc.

Pensez également à ajouter des classes CSS pour obtenir le comportement souhaité. Souvent, vous pouvez ajouter une classe à un élément conteneur et utiliser CSS pour affecter tous les éléments. Je gifle souvent une classe sur l'élément body pour indiquer qu'une réponse AJAX est en attente. Ensuite, je peux utiliser des sélecteurs CSS pour obtenir l'affichage que je veux.

Je ne sais pas si c'est ce que vous recherchez.

Pour les propriétés sur lesquelles la transition css affectera, vous pouvez utiliser l'événement transitionend, par exemple pour 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>

Vous ne pouvez pas. CSS ne prend pas en charge les «événements». Oserais-je vous demander pourquoi vous en avez besoin? Consultez cet article ici sur SO. Je ne peux pas penser à une raison pour laquelle vous voudriez relier un événement à un changement de style. Je suppose ici que le changement de style est déclenché ailleurs par un morceau de javascript. Pourquoi ne pas y ajouter une logique supplémentaire?