使用jQuery 檢測CSS 屬性變更的事件

在Web 開發領域，偵測元素CSS 屬性的變更可以是對於實作動態更新至關重要。使用 jQuery，您可以利用 DOM 事件的強大功能來有效監視和回應 CSS 屬性（例如「顯示」）的變更。

使用 DOMAttrModified 事件

現代瀏覽器提供對 DOM 突變事件的支持，其中包括 DOMAttrModified 事件。此事件專門設計用於在修改元素的屬性時通知您，包括內聯或透過外部樣式表定義的 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';

突變觀察者註意事項

雖然上述技術是過去檢測CSS 屬性變化的常用方法，較新的瀏覽器建議使用Mutation Observers，它提供了一種更標準化和簡化的機制來監視特定DOM 元素的變更。