JavaScript
jQuery
dom
style

MutationObserverでのDOMのスタイルの監視

More than 3 years have passed since last update.

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')が起こる

参照


http://blog.gutyan.jp/entry/2014/09/06/MutationObserver