リアルタイムで変化するDOM要素のプロパティを表示する方法は？

JavaScriptコードは、イベントなどに応答することにより、DOM要素のプロパティ/属性をリアルタイムで更新できます。以下に例を示します。

そのページの表で、マウスをセルの上に移動します。マウスがその上にあるときに色がどのように変化し、マウスを別のセルに移動すると色が消えることに注意してください。

次に、FirefoxまたはChrome（ただしIE、Operaなどではない）を使用して、マウスカーソルが領域に出入りするときにリアルタイムで更新されるセルの背景色（RGBまたは16進数など）を調べます。 JSにそのことをさせます。

私が現在観察している動作は、FirefoxとChromeの両方の要素の検査機能は、JavaScriptによって更新されるため、プロパティの値を更新しないということです。そのため、プロパティの最新の値を表示するには、要素を再度検査する必要があり、値の瞬間的な「スナップショット」が必要です。しかし、マウスを置いている間だけ値が変わるので、マウスカーソルがセル上にあるときに必要な値のスナップショットを取ることができません。セルからマウスを削除して[Inspect右クリックリストの[要素]アイテム！

Firefox または Chrome、または拡張機能を使用して、ソフトウェアの最新バージョン（最新の安定版まで）で値をリアルタイムで更新できる場合は、そのための指示を提供してください。

デモでセルの1つを選択する<div>と、セルを境界線上で正確にヒットしない限り、セルに含まれているセルが自動的に選択されます。

ただし、スタイルの変更は、セルではなくセルに適用され<div>ます。開発者ツールでセルがフォーカスされているときにセルにカーソルを合わせると、新しいCSSが適用されているのが見えるはずです。さらに、計算済みスタイルペインを展開して、スタイルの完全なセットを表示できます。