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

Question

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

Answer 1

Oui, vous pouvez. DOM L2 Événements module définit la mutation des événements; l'un d'eux - DOMAttrModified est celui dont vous avez besoin. Accordées, elles ne sont pas largement mis en œuvre, mais sont pris en charge dans au moins Gecko et Opera navigateurs.

Essayez quelque chose le long de ces lignes:

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 aussi essayer en utilisant IE "propertychange de l'événement" en remplacement de l' DOMAttrModified. Elle doit permettre de détecter style changements de manière fiable.

Answer 2

Vous pouvez utiliser le 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...
            }
        }
    }
});
 

Answer 3

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

Colin est droit, qui n'est pas explicite événement qui obtient déclenché lorsqu'un CSS spécifique de la propriété est changé. Mais vous pouvez être en mesure de retourner autour de, et de déclencher un événement qui permet de définir l'affichage, et tout le reste.

Pensez également à utiliser l'ajout de classes CSS pour obtenir le comportement que vous voulez. Souvent, vous pouvez ajouter une classe à un élément contenant, et utiliser les CSS pour affecter tous les éléments. Souvent, je claque une classe à l'élément de corps pour indiquer qu'une réponse AJAX est en attente. Alors je peux utiliser les sélecteurs CSS pour obtenir l'affichage que je veux.

Vous ne savez pas si c'est ce que vous cherchez.

Answer 4

Tu ne peux pas. CSS ne supporte pas les "événements". Oserai-je demander pourquoi vous en avez besoin? Découvrez ce post ici sur SO. Je ne vois pas pourquoi vous voudriez associer 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 ajouter de la logique supplémentaire là-bas?