web-dev-qa-db-fra.com

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

Existe-t-il un moyen de détecter si la propriété css "display" d'un élément est modifiée (qu'elle soit nulle, block ou inline-block ...)? si non, un plugin? Merci

javascriptjqueryhtml
86
HP.

Remarque

Les événements de mutation sont déconseillés depuis la publication de ce message et peuvent ne pas être pris en charge par tous les navigateurs. Au lieu de cela, utilisez un observateur de mutation .

Oui, vous pouvez. Le module DOM L2 Events définit événements de mutation ; l'un d'eux - DOMAttrModified est celui dont vous avez besoin. Certes, ils ne sont pas largement implémentés, mais ils sont supportés au moins dans les navigateurs Gecko et Opera.

Essayez quelque chose dans ce sens:

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. Cela devrait permettre de détecter style les changements de manière fiable.

88
kangax

Vous pouvez utiliser plugin attrchange jQuery . La fonction principale du plugin est de lier une fonction d'écoute lors du changement d'attribut d'é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...
            }
        }
    }
});
17
Muhammad Reda

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

Colin a raison de dire qu'aucun événement explicite n'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éfinira l'affichage, et ainsi de suite.

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

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

4
ndp

Pour les propriétés sur lesquelles la transition css aura une incidence, pouvez utiliser un événement transitionend, 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>
3
IgorL