javascript - 計算されたスタイル変更で発生するイベントはありますか?

Question

特定の DOM 要素の計算されたスタイルが変更されたことを通知する JavaScript でリッスンできるイベントはありますか?

そうでない場合、JavaScript を使用して DOM 要素の計算されたスタイルを取得する最もブロックの少ない方法は何ですか?

Answer 1

DOM 要素の計算されたスタイルの変更に関するイベント リスナーはありません。

setInterval を介して getComputedStyle の値を監視している場合は、自分で作成することもできますが、実装によっては高価で扱いにくい場合があります。

サイズ変更時のスタイル変更だけが心配な場合は、window.onresize (下記) を使用するか、場合によっては JQuery のサイズ変更イベント ハンドラーを使用する必要があります。

window.onresize = function(event) {
    ...
};

CSS3 プロパティを参照するための詳細なクロス ブラウザー ソリューションについては、こちらで非常によく読んでいます。

これは jQuery ではありませんが、Firefox、Opera、および Safari では window.getComputedStyle(element)要素の計算されたスタイルを取得するために使用でき、IE<=8 では を使用できますelement.currentStyle。返されるオブジェクトはケースごとに異なります。また、Javascript を使用して作成された要素とスタイルがどの程度うまく機能するかはわかりませんが、おそらく役立つでしょう。

Safariでは、次のようなことができます。

document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;