「スタイルチェンジ」イベントを聞くことは可能ですか？

スタイルの変更にバインドできるjQueryでイベントリスナーを作成することは可能ですか？たとえば、要素が寸法を変更したときに何かを「実行」したい場合、またはスタイル属性のその他の変更を実行したい場合、

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

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

それは本当に便利でしょう。

何か案は？

更新

私自身これに答えて申し訳ありませんが、私は他の誰かに合うかもしれないきちんとしたソリューションを書きました：

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

これにより、内部のprototype.cssメソッドが一時的にオーバーライドされ、最後にトリガーで再定義されます。したがって、次のように機能します。

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

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

jQueryはオープンソースなので、css呼び出されるたびに（jQueryオブジェクトを渡して）選択した関数を呼び出すように関数を微調整できると思います。もちろん、jQueryコードを精査して、CSSプロパティを設定するために内部で使用するコードが他にないことを確認する必要があります。理想的には、jQueryライブラリ自体に干渉しないようにjQueryのプラグインを個別に作成する必要がありますが、それがプロジェクトに適しているかどうかを判断する必要があります。

質問が出されて以来、状況は少し変わりました。MutationObserverを使用して、要素の「style」属性の変更を検出できるようになりました。jQueryは不要です。

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

コールバック関数に渡される引数は、古いスタイル値と新しいスタイル値を取得できるMutationRecordオブジェクトです。

IE 11+を含む最新のブラウザーでのサポートは良好です。

イベントオブジェクトの宣言は、新しいcss関数内にある必要があります。それ以外の場合、イベントは一度だけ発生できます。

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

コードからではなく、イベントを起動できない場合は、マイクからの回答が最適です。しかし、それを使用するとエラーが発生します。そこで、私が使用するコードを紹介するための新しい回答を書きます。

拡張

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

使用法

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

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

var ev = new $ .Event（ 'style'）;のでエラーが発生しました。HtmlDivでスタイルのようなものが定義されていませんでした。それを削除して、今すぐ$（this）.trigger（ "stylechanged"）を起動します。もう1つの問題は、Mikeが$（css、..）の結果を返さなかったことです。この場合、問題が発生する可能性があります。結果を取得して返します。動作します^^すべてのcss変更に、変更およびイベントのトリガーができない一部のライブラリからのインクルードがあります。

他の人が示唆しているように、要素のスタイルを変更するコードを制御できる場合は、要素の高さを変更するときにカスタムイベントを発生させることができます。

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

それ以外の場合は、かなりのリソースを消費しますが、タイマーを設定して、要素の高さの変更を定期的にチェックできます...

jQueryまたはJavaScriptのスタイル変更イベントの組み込みサポートはありません。ただし、jQueryはカスタムイベントを作成してそれをリッスンすることをサポートしていますが、変更があるたびに、自分でトリガーする方法が必要です。したがって、それは完全なソリューションではありません。

あなたはjqueryプラグインを試すことができます、それはCSSが変更されたときにイベントをトリガーし、使いやすいです

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

興味深い質問です。問題は、height（）がコールバックを受け入れないため、コールバックを起動できないことです。animate（）またはcss（）を使用して高さを設定し、コールバックでカスタムイベントをトリガーします。以下は、コンセプトの証明として、テストおよび動作するanimate（）を使用した例です（demo）。

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

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

上から@Davidのソリューションを追加して形式化するだけです：

jQuery関数はチェーン可能であり、「this」を返すため、複数の呼び出しを順番に呼び出すことができます（例：）$container.css("overflow", "hidden").css("outline", 0);。

したがって、改善されたコードは次のようになります。

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

jQuery cssHooksはどうですか？

多分私は質問を理解していませんが、あなたが探しているものはcssHooks、css()機能を変更することなく、で簡単に行うことができます。

ドキュメントからコピー：

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

同じ問題があったので、これを書きました。それはかなりうまくいきます。いくつかのCSSトランジションと組み合わせると見栄えが良くなります。

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