1. ホーム
  2. ジャバスクリプト

[解決済み】「スタイル変更」イベントをリッスンすることは可能ですか?

2022-04-05 04:32:12

質問

jQueryで、スタイルの変更にバインドできるイベントリスナーを作成することは可能でしょうか?例えば、ある要素の寸法が変更されたときや、style属性が変更されたときに何かをしたい場合、私はそれを行うことができます。

$('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ライブラリ自体に干渉しないようにしたいところですが、それがあなたのプロジェクトで実現可能かどうかを判断する必要があります。