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

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

DOMAttrModified Event の使用

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

DOMAttrModified イベントを利用するには、jQuery の on() 関数。以下に示すように:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

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

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

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

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

document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Mutation Observers に関する注意

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