Est-il possible d’écouter un événement de « changement de style » ?

Question

Est-il possible de créer un écouteur d'événement en jQuery qui peut être lié à tous les changements de style? Par exemple, si je veux "faire" quelque chose lorsqu'un élément changements de dimensions, ou de tout autre changement dans l'attribut style, j'ai pu faire:

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

Il serait vraiment utile.

Des idées?

Mise à JOUR

Désolé pour répondre à cette question à moi-même, mais j'ai écrit une solution élégante qui pourrait correspondre à quelqu'un d'autre:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

Ce sera temporaire remplacer l'interne prototype.méthode css et de le redéfinir avec un seuil de déclenchement à la fin. De sorte qu'il fonctionne comme ceci:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

Answer 1

Un peu, les choses ont bougé puisque la question a été posée - il est maintenant possible d’utiliser un MutationObserver pour détecter des changements dans l’attribut « style » d’un élément, pas besoin de jQuery.

Prise en charge est bonne dans les navigateurs modernes , mais si vous avez besoin soutenir IE vous devrez peut-être attendre un an ou deux.

Answer 2

Depuis jQuery est open-source, je suppose que vous pourriez ajuster l' css de la fonction appeler une fonction de votre choix chaque fois qu'il est invoqué (en passant de l'objet jQuery). Bien sûr, vous aurez envie de parcourir le code jQuery assurez-vous qu'il n'est rien d'autre qu'il utilise en interne pour définir les propriétés CSS. Idéalement, vous voulez écrire un distinct plugin pour jQuery de manière à ne pas interférer avec la bibliothèque jQuery lui-même, mais vous aurez à décider si oui ou non c'est possible pour votre projet.

Answer 3

La déclaration de votre objet d’événement doit être à l’intérieur de votre nouvelle fonction css. Dans le cas contraire l’événement peut être seulement une fois feu.

Answer 4

Je pense que la meilleure réponse si de Mike dans le cas où vous ne pouvez pas lancer votre événement car n'est pas à partir de votre code. Mais j'ai des erreurs quand je l'ai utilisé. Alors, j'ai écrit une nouvelle réponse pour vous montrer le code que j'utilise.

(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger("stylechanged");
        return result;
    }
})();

Je suis d'erreur car var ev = new $.Événement('style'); quelque Chose comme le style n'était pas défini dans HtmlDiv.. je l'ai enlevé, et je me lance maintenant $(this).trigger("stylechanged"). Un autre problème était que Mike n'a pas renvoyé de la resulto de $(css, ..) alors Il peut créer des problèmes dans certains cas. Donc, je reçois le résultat et de le retourner. Fonctionne maintenant ^^ Dans tous les css changement de certaines libs que je ne peux pas le modifier et de déclencher un événement.

Answer 5

Comme d’autres l’ont suggéré, si vous avez un contrôle sur le code change le style de l’élément vous pourriez déclencher un événement personnalisé lorsque vous modifiez la hauteur de l’élément :

Dans le cas contraire, bien qu’assez gourmand en ressources, vous pouvez affecter un timer pour vérifier périodiquement les changements à la hauteur de l’élément...