javascriptのイベントでDOMのスタイルの変更を検知できないかと思って、下記ブログを見つけてそれを元に作成。
MutationObserverでDOMを監視して、変更があったらeventをなげる。
よくわかっていないので、結構間違っているかもしれない。
なおこのサンプルコードはjQueryは必須です、javascriptだけでも書けますが、私はjQueryでDOMを捕まえるのがクセになっているので。
あとこのMutationObserver、IEは11から対応のようです。
/* 1 Dom Style Watcher本体 監視する側*/
var domStyleWatcher = {
Start: function(tgt, styleobj){
//発生
function eventHappen(data1, data2){
var throwval = tgt.css(styleobj);
tgt.trigger('domStyleChange', [throwval]);//eventを投げる
}
//監視の登録
var tge = tgt[0];//jQueryオブジェクトをelementに変えてる
var filter = ['style'];//styleを見る
var options = {//監視オプション
attributes: true,
attributeFilter: filter
};
var mutOb = new MutationObserver(eventHappen);//監視用インスタンス作成
mutOb.observe(tge, options);//監視開始
return mutOb;//一応return
},
Stop: function(mo){
mo.disconnect();
}
};
/* 2 ターゲット 監視される側*/
var target = $('#id');//ターゲット
//イベントが起きた際に行うことを設定
function catchEvent(event, value){
console.log('イベントキャッチ');
console.log(event);
console.log(value);
}
var styleobj = 'top';//style内のほしい値
target.on('domStyleChange', catchEvent);//イベントを登録
var dsw = domStyleWatcher.Start(target, styleobj);//監視開始
//domStyleWatcher.Stop(dsw);//監視終了
/* 3 テスト*/
target.css('top',50);//ここでevent('domStyleChange')が起こる
参照