Ist es möglich, ein "Style Change" -Ereignis anzuhören?

Ist es möglich, in jQuery einen Ereignis-Listener zu erstellen, der an Stiländerungen gebunden werden kann? Wenn ich beispielsweise etwas "tun" möchte, wenn ein Element die Abmessungen ändert, oder andere Änderungen am Stilattribut, könnte ich Folgendes tun:

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

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

Es wäre wirklich nützlich.

Irgendwelche Ideen?

AKTUALISIEREN

Es tut mir leid, dass ich das selbst beantwortet habe, aber ich habe eine nette Lösung geschrieben, die zu jemand anderem passen könnte:

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

Dadurch wird die interne prototype.css-Methode vorübergehend überschrieben und am Ende mit einem Trigger neu definiert. So funktioniert es:

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

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

Da jQuery Open Source ist, würde ich vermuten, dass Sie die cssFunktion optimieren können, um bei jedem Aufruf eine Funktion Ihrer Wahl aufzurufen (Übergabe des jQuery-Objekts). Natürlich sollten Sie den jQuery-Code durchsuchen, um sicherzustellen, dass intern nichts anderes zum Festlegen von CSS-Eigenschaften verwendet wird. Idealerweise möchten Sie ein separates Plugin für jQuery schreiben, damit es die jQuery-Bibliothek selbst nicht beeinträchtigt. Sie müssen jedoch entscheiden, ob dies für Ihr Projekt möglich ist oder nicht.

Seit die Frage gestellt wurde, haben sich die Dinge etwas weiterentwickelt. Es ist jetzt möglich, einen MutationObserver zu verwenden, um Änderungen im 'style'-Attribut eines Elements zu erkennen, ohne dass jQuery erforderlich ist:

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'] });

Das Argument, das an die Rückruffunktion übergeben wird, ist ein MutationRecord- Objekt, mit dem Sie die alten und neuen Stilwerte abrufen können.

Die Unterstützung ist in modernen Browsern einschließlich IE 11+ gut.

Die Deklaration Ihres Ereignisobjekts muss sich in Ihrer neuen CSS-Funktion befinden. Andernfalls kann das Ereignis nur einmal ausgelöst werden.

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

Ich denke, die beste Antwort von Mike für den Fall, dass Sie Ihre Veranstaltung nicht starten können, weil sie nicht aus Ihrem Code stammt. Aber ich bekomme einige Fehler, wenn ich es benutzt habe. Also schreibe ich eine neue Antwort, um Ihnen den Code zu zeigen, den ich verwende.

Erweiterung

// 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;
    }
})();

Verwendung

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

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

Ich habe eine Fehlermeldung erhalten, weil var ev = new $ .Event ('style'); So etwas wie Stil wurde in HtmlDiv nicht definiert. Ich habe ihn entfernt und starte jetzt $ (this) .trigger ("stylechanged"). Ein weiteres Problem war, dass Mike das Ergebnis von $ (css, ..) nicht zurückgegeben hat. In einigen Fällen kann es zu Problemen kommen. Also bekomme ich das Ergebnis und gebe es zurück. Jetzt funktioniert ^^ In jeder CSS-Änderung sind einige Bibliotheken enthalten, die ich nicht ändern und ein Ereignis auslösen kann.

Wie andere vorgeschlagen haben, können Sie ein benutzerdefiniertes Ereignis auslösen, wenn Sie die Kontrolle über den Code haben, der den Stil des Elements ändert: Wenn Sie die Höhe des Elements ändern:

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

Andernfalls können Sie, obwohl ziemlich ressourcenintensiv, einen Timer einstellen, der regelmäßig nach Änderungen an der Höhe des Elements sucht ...

Es gibt keine eingebaute Unterstützung für das Stiländerungsereignis in jQuery oder in Java Script. JQuery unterstützt jedoch das Erstellen und Abhören von benutzerdefinierten Ereignissen. Bei jeder Änderung sollten Sie jedoch die Möglichkeit haben, diese selbst auszulösen. Es wird also keine vollständige Lösung sein.

Sie können das Jquery-Plugin ausprobieren. Es löst Ereignisse aus, wenn CSS geändert wird, und es ist einfach zu verwenden

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
  }
});

Interessante Frage. Das Problem ist, dass height () keinen Rückruf akzeptiert, sodass Sie keinen Rückruf starten können. Verwenden Sie entweder animate () oder css (), um die Höhe festzulegen, und lösen Sie dann das benutzerdefinierte Ereignis im Rückruf aus. Hier ist ein Beispiel mit animate (), getestet und funktioniert ( Demo ) als Proof of Concept:

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

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

Fügen Sie einfach die @ David-Lösung von oben hinzu und formalisieren Sie sie:

Beachten Sie, dass jQuery-Funktionen verkettbar sind und 'this' zurückgeben, sodass mehrere Aufrufe nacheinander aufgerufen werden können (z $container.css("overflow", "hidden").css("outline", 0);. B. ).

Der verbesserte Code sollte also sein:

(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
    }
})();

Wie wäre es mit jQuery cssHooks?

Vielleicht verstehe ich die Frage nicht, aber was Sie suchen, ist leicht zu erledigen cssHooks, ohne die css()Funktion zu ändern .

Kopie aus der Dokumentation:

(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/

Ich hatte das gleiche Problem, also habe ich das geschrieben. Es funktioniert ziemlich gut. Sieht gut aus, wenn Sie es mit einigen CSS-Übergängen mischen.

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