要素の属性の変更を監視

Question

下記の#1コードでの.piyo内の要素の追加や削除といった動的な要素の変化を
監視することができるのですが、#2のように属性の変化をつかまえることができません。
このようにattrの追加、削除、変化のイベントを監視することは可能でしょうか？

なお、実際に属性の変更はリッチテキストエディタでユーザが
対象の要素がアクティブ状態で特定のコマンドを実行した際に、該当の要素<p>にstyle=""が
追加されます。

また、可能であれば方法をご教示願えますでしょうか。
よろしくお願い申し上げます。

#1
$('.piyo').on('DOMSubtreeModified propertychange', function() {
//do somethig
    });

#2
<div class="piyo">
 <p>hello</p>
</div>

↓ //属性の追加style="color:#f00"

<div class="piyo">
 <p style="color:#f00">hello</p>
</div>

Comments

[m.ts10806]

divが閉じてませんが、問題ないですか？

[m.ts10806]

また、その「属性の追加」はどのようなときに起こるのでしょうか。

[pegy]

ご指摘ありがとうございます。修正しました。2点ついて、簡単に触れましたが、リッチテキストを含めてコードをご提示した場合、あまりにも膨大な量になってしまうため、コメントとして記載いたしました。よろしくお願い致します。

Answer 1

こんな感じの情報が欲しいのでしょうか？？
見当違いならスルーして下さい。
検索ワードは「js 属性 変更 監視」
Google検索でトップに出てきます|ーﾟ)
DOMの変更を監視

Comments

[pegy]

ありがとうございます。参考にさせていただきます。