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

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

Web 開発の領域では、要素の CSS プロパティへの変更を検出することができます。動的更新を実装するために重要です。 jQuery を使用すると、DOM イベントの機能を利用して、「表示」などの CSS プロパティの変更を効果的に監視し、それに応答できます。

DOMAttrModified イベントの使用

モダンブラウザは、DOMAttrModified イベントを含む DOM 変更イベントのサポートを提供します。このイベントは、インラインまたは外部スタイルシートを通じて定義された CSS プロパティなど、要素の属性が変更されたときに通知するように特別に設計されています。

DOMAttrModified イベントを利用するには、jQuery の on() 関数:

<code class="javascript">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>

この例では、イベント リスナーを

document.documentElement 要素にアタッチします。これは、イベント リスナーのルートを表します。文書。スタイル属性 (「display」など) が変更されると、このイベント ハンドラーがトリガーされ、変更された属性の以前の値と現在の値にアクセスできるようになります。

IE の "propertychange" イベントを利用

DOMAttrModified をサポートしていない古いブラウザの場合は、Internet Explorer 独自の "propertychange" イベントをフォールバックとして使用できます。このイベントは IE によって特別にサポートされていますが、これらの環境でスタイルの変更を検出するための信頼できる方法を提供できます。

"propertychange" イベントを利用するには、jQuery の を使用できます。次の例に示すように、文字列引数を指定した on() 関数:

<code class="javascript">document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

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

Mutation Observers に関する注意

前述の手法は一般的でしたが、以前は CSS プロパティの変更を検出するアプローチが使用されていましたが、新しいブラウザでは、特定の DOM 要素の変更を監視するための、より標準化され合理化されたメカニズムを提供する Mutation Observers の使用を推奨しています。

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