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

Est-il possible de créer un écouteur d'événements dans jQuery qui peut être lié à tout changement de style? Par exemple, si je veux "faire" quelque chose lorsqu'un élément change de dimension, ou tout autre changement dans l'attribut de style, je pourrais faire:

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

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

Ce serait vraiment utile.

Des idées?

METTRE À JOUR

Désolé d'avoir répondu moi-même à cette question, mais j'ai écrit une solution intéressante qui pourrait convenir à quelqu'un d'autre:

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

Cela remplacera temporairement la méthode interne prototype.css et la redéfinira avec un déclencheur à la fin. Donc ça marche comme ça:

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

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

Étant donné que jQuery est open-source, je suppose que vous pouvez modifier la cssfonction pour appeler une fonction de votre choix chaque fois qu'elle est invoquée (en passant l'objet jQuery). Bien sûr, vous voudrez parcourir le code jQuery pour vous assurer qu'il n'y a rien d'autre qu'il utilise en interne pour définir les propriétés CSS. Idéalement, vous voudriez écrire un plugin séparé pour jQuery afin qu'il n'interfère pas avec la bibliothèque jQuery elle-même, mais vous devrez décider si cela est faisable ou non pour votre projet.

Les choses ont évolué un peu depuis que la question a été posée - il est maintenant possible d'utiliser un MutationObserver pour détecter les changements dans l'attribut 'style' d'un élément, aucune jQuery requise:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

L'argument qui est transmis à la fonction de rappel est un objet MutationRecord qui vous permet de récupérer les anciennes et les nouvelles valeurs de style.

Le support est bon dans les navigateurs modernes, y compris IE 11+.

La déclaration de votre objet événement doit se trouver dans votre nouvelle fonction css. Sinon, l'événement ne peut être déclenché qu'une seule fois.

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

Je pense que la meilleure réponse si de Mike dans le cas où vous ne pouvez pas lancer votre événement parce qu'il ne provient pas de votre code. Mais je reçois des erreurs lorsque je l'ai utilisé. J'écris donc une nouvelle réponse pour vous montrer le code que j'utilise.

Extension

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

Usage

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

J'ai eu une erreur car var ev = new $ .Event ('style'); Quelque chose comme le style n'était pas défini dans HtmlDiv .. Je l'ai supprimé et je lance maintenant $ (this) .trigger ("stylechanged"). Un autre problème est que Mike n'a pas renvoyé le résultat de $ (css, ..), ce qui peut poser des problèmes dans certains cas. Donc j'obtiens le résultat et je le retourne. Fonctionne maintenant ^^ Dans chaque changement CSS, incluez des libs que je ne peux pas modifier et déclencher un événement.

Comme d'autres l'ont suggéré, si vous contrôlez le code qui modifie le style de l'élément, vous pouvez déclencher un événement personnalisé lorsque vous modifiez la hauteur de l'élément:

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

Sinon, bien que très gourmand en ressources, vous pouvez définir une minuterie pour vérifier périodiquement les modifications de la hauteur de l'élément ...

Il n'y a pas de support intégré pour l'événement de changement de style dans jQuery ou dans le script java. Mais jQuery prend en charge la création d'un événement personnalisé et l'écoute, mais chaque fois qu'il y a un changement, vous devez avoir un moyen de le déclencher par vous-même. Ce ne sera donc pas une solution complète.

vous pouvez essayer le plugin Jquery, il déclenche des événements lorsque css est modifié et il est facile à utiliser

http://meetselva.github.io/#gist-section-attrchangeExtension

 $([selector]).attrchange({
  trackValues: true, 
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

Question interessante. Le problème est que height () n'accepte pas de rappel, vous ne pourrez donc pas lancer de rappel. Utilisez animate () ou css () pour définir la hauteur, puis déclenchez l'événement personnalisé dans le rappel. Voici un exemple utilisant animate (), testé et fonctionne ( démo ), comme preuve de concept:

$('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
}); 

Il suffit d'ajouter et de formaliser la solution de @David par le haut:

Notez que les fonctions jQuery sont chaînables et renvoient «this» afin que plusieurs invocations puissent être appelées l'une après l'autre $container.css("overflow", "hidden").css("outline", 0); ).

Le code amélioré devrait donc être:

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

Que diriez-vous de jQuery cssHooks?

Peut-être que je ne comprends pas la question, mais ce que vous recherchez se fait facilement cssHookssans changercss() fonction.

copie de la documentation:

(function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery ); 

https://api.jquery.com/jQuery.cssHooks/

J'ai eu le même problème, alors j'ai écrit ceci. Cela fonctionne plutôt bien. A l'air bien si vous le mélangez avec certaines transitions CSS.

function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}