jQuery を使用して CSS プロパティの変更を検出するにはどうすればよいですか?

jQuery を使用した CSS プロパティ変更の変異イベント検出

Web 開発では、CSS プロパティの変更を検出する必要性がよく発生します。たとえば、要素の表示プロパティが変更されたときに特定のアクションを実行したい場合があります。ただし、表示プロパティまたはその他の CSS プロパティが jQuery でネイティブに変更されたかどうかを判断するのは困難な場合があります。

DOMAttrModified を使用した CSS プロパティの変更の確認

幸いなことに、 DOM レベル 2 イベント モジュールは、ミューテーション イベントを使用してこのニーズに対応します。このようなイベントの 1 つである DOMAttrModified は、スタイルの変更を含む属性の変更を監視する機能を提供します。

DOMAttrModified を使用するには、次のコードを実装できます。

<code class="js">document.documentElement.addEventListener('DOMAttrModified', function(e) {
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';</code>

このコードは、リスナーをDOMAttrModified イベントのルート要素 (document.documentElement)。 style 属性が変更されると、リスナーは以前の値と新しい値をキャプチャします。

Internet Explorer の代替: propertychange

Internet Explorer ブラウザをサポートする必要がある場合は、次のことができます。 「propertychange」イベントを DOMAttrModified へのフォールバックとして利用します。これにより、IE でのスタイル変更を確実に検出できるようになります。

注:

ミューテーション イベントは非推奨になっており、すべてのブラウザーでサポートされているわけではないことに注意することが重要です。よりブラウザー間で互換性のあるソリューションを実現するには、代わりに突然変異オブザーバーの使用を検討してください。

以上がjQuery を使用して CSS プロパティの変更を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。